Question

我在google搜索时没有看到任何示例。我尝试在左侧浮动thead，在右侧浮动tbody，但它不起作用。如何在左侧有一个表头而不是在顶部显示？

<table class="table">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

Answer 1

如果您希望标题位于表格的左侧，只需以不同方式编写标记：

<table class="table">
    <tbody>
        <tr>
          <th>Row</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
          <th>First Name</th>
            <td>John</td>
            <td>Peter</td>
            <td>John</td>
        </tr>
        <tr>
          <th>Last Name</th>
            <td>Carter</td>
            <td>Parker</td>
            <td>Rambo</td>
        </tr>
        <tr>
          <th>Email</th>
            <td>johncarter@mail.com</td>
            <td>peterparker@mail.com</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

请参阅this demo

Bootstrap左侧的表头？

1 个答案: