How to make this table scrollable and header fixed Bootstrap -
hello have tried various implementation of bootstrap fixed header , body scroll nil worked out me.can help how done.
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>
please dont mark duplicate. have tried every other way,my table construction differs others questions.
p:s: new here, feeling hard jfiddle link in post.sorry bad format
apply code css
tbody { background-color: #ddd; height: 300px; overflow: auto; } td { padding: 3px 10px; } thead > tr, tbody{ display:block; }
twitter-bootstrap
No comments:
Post a Comment