Bootstrap 2 表格 - Bootstrap 2 基础教程

Bootstrap 2 内置了表格样式

Bootstrap 2 的简单表格

Bootstrap 2 中的表格基本样式如下

<table class="table">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 table demo

Bootstrap 的斑马表格

Bootstrap 2 .table-striped 用来添加一个斑马条纹的的表格

<table class="table table-striped">
    <thead>
    <tr>
        <th>Student-ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td>
        <td>Rammohan </td>
        <td>Reddy</td>
        <td>A+</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Smita</td>
        <td>Pallod</td>
        <td>A</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Rabindranath</td>
        <td>Sen</td>
        <td>A+</td>
    </tr>
    </tbody>
</table>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 table demo