bootstrap表头已修复问题

时间:2017-07-31 03:55:07

标签: css twitter-bootstrap html-table tableheader

我正在使用 bootstrap 。我试图使用固定的表头,但它没有被修复,它可以滚动。我不想 <div class="widget-content"> <div class="container"> <table class="table table-bordered"> <thead> <th class="text-center"> my</th> <th class="text-center"> text / line</th> <th class="text-center">caps/ lock</th> <th class="text-center">Value</th> <th class="text-center">Qty</th> <th class="text-center">other</th> </thead> <tbody> <tr class="dt-picked"> <td class="text-center"> <span style="color:white; font-weight:bold;"> text</span> </td> <td class="text-center"> <p>text</p> </td> <td class="text-center "> <p>text</p> <p>text</p> </td> <td class="text-center"> <p>text</p></td> <td class="text-center b-color-1"><p>text</p></td> <td> class="btn btn-mini btn-danger" role="button">Sell</a> </td> </tr> <tr> <td colspan="4" class="text-right no-stripe">Total Cash</td> <td class="b-color-1"><p>text</p></td> </tr> <tr> <td colspan="4" class="text-right no-stripe">Total Invested</td> <td class="b-color-1"><p>text</p></td> <td colspan="2" class="no-stripe"></td> </tr> <tr> <td colspan="4" class="text-right bold no-stripe">Bottom Line</td> <td class="b-color-1 bold"><p>text</p></td> <td colspan="2" class="no-stripe"></td> </tr> </tbody> </table> </div> </div> 表格标题,我想要一个固定的表格标题。 请帮我解决。

这是我的代码示例:

这是我的代码:

{{1}}

2 个答案:

答案 0 :(得分:2)

我找到了一个小提琴

<thead>
    <tr class="header">
      <th>
        Table attribute name
        <div>Table attribute name</div>
      </th>
      <th>
        Value
        <div>Value</div>
      </th>
      <th>
        Description
        <div>Description</div>
      </th>
    </tr>
  </thead>

https://jsfiddle.net/byB9d/14995/

答案 1 :(得分:0)

尝试在thead上使用position属性

 <thead style="position:absolute;">
              <th class="text-center"> my</th>
              <th class="text-center"> text / line</th>
              <th  class="text-center">caps/ lock</th>
              <th  class="text-center">Value</th>
              <th  class="text-center">Qty</th>
              <th  class="text-center">other</th>
              </thead>