Question

您好我已经尝试了各种实现bootstrap固定标题和正文滚动但没有任何问题对我来说。任何人都可以帮忙解决这个问题。

<table class="table  table-striped  table-bordered table-fixedheader">
<thead>
<tr class="success">
<th>Answer</th>
<th>Total</th>
<th>PCP</th>
<th>OB/GYN</th>
<th>PAIN</th>
<th>Other</th>
</tr>
</thead>

<tbody style="height:100px"><tr><td>Alabama</td>
<td>3</td>
<td>2</td>
<td></td>
<td>1</td>
<td></td></tr><tr><td>Arizona</td>
<td>3</td>
<td>3</td>
<td></td>
<td></td>
<td></td></tr><tr><td>California</td>
<td>35</td>
<td>18</td>
<td>9</td>
<td>8</td>
<td></td></tr><tr><td>Colorado</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Connecticut</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>District of Columbia</td>
<td>1</td>
<td></td>
<td></td>
<td>1</td>
<td></td></tr><tr><td>Florida</td>
<td>20</td>
<td>16</td>
<td>1</td>
<td>3</td>
<td></td></tr><tr><td>Georgia</td>
<td>6</td>
<td>1</td>
<td>5</td>
<td></td>
<td></td></tr><tr><td>Illinois</td>
<td>12</td>
<td>8</td>
<td>2</td>
<td>2</td>
<td></td></tr><tr><td>Indiana</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Kansas</td>
<td>2</td>
<td></td>
<td>2</td>
<td></td>
<td></td></tr><tr><td>Kentucky</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Maryland</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Massachusetts</td>
<td>4</td>
<td>3</td>
<td></td>
<td>1</td>
<td></td></tr><tr><td>Michigan</td>
<td>5</td>
<td>4</td>
<td></td>
<td>1</td>
<td></td></tr><tr><td>Missouri</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Nevada</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td></tr><tr><td>New Jersey</td>
<td>14</td>
<td>7</td>
<td>4</td>
<td>3</td>
<td></td></tr><tr><td>New Mexico</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td></tr><tr><td>New York</td>
<td>25</td>
<td>13</td>
<td>5</td>
<td>7</td>
<td></td></tr><tr><td>North Carolina</td>
<td>6</td>
<td>1</td>
<td>1</td>
<td>4</td>
<td></td></tr><tr><td>Ohio</td>
<td>6</td>
<td>5</td>
<td>1</td>
<td></td>
<td></td></tr><tr><td>Pennsylvania</td>
<td>16</td>
<td>9</td>
<td>4</td>
<td>3</td>
<td></td></tr><tr><td>Tennessee</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Texas</td>
<td>20</td>
<td>10</td>
<td>5</td>
<td>5</td>
<td></td></tr><tr><td>Virginia</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Washington</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td></tr><tr><td>West Virginia</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td></tr><tr><td>Wisconsin</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td></tr></tbody>
</table>

请不要将此标记为重复。我已经尝试过其他方式，我的表结构与其他问题不同。

P：S：我是新来的，感觉很难在这篇帖子中找到这个jfiddle链接。格式不好

Answer 1

将此代码应用于css

tbody {
    background-color: #ddd;
    height: 300px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
thead > tr, tbody{
    display:block;
}

Answer 2

我不确定是否存在类'table-fixedheader'。我在Bootstrap 3.0中没有看到。但是你可以使用jQuery插件（http://fixedheadertable.com/）。

如何使这个表可滚动和标题固定Bootstrap

2 个答案: