如何使此表可滾動和標題固定引導記錄

Question

你好，我已經嘗試過引導固定頭和身體滾動的各種實現，但沒有爲我工作。可以幫助任何人如何做到這一點。

Jsfiddle here

<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：我是新來的，感覺很難進入這個post.sorry這個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/）。