引导表头修复问题答案

【问题标题】：bootstrap Table header fixed issue引导表头修复问题
【发布时间】：2018-01-06 12:21:41
【问题描述】：

我正在使用 引导程序。我正在尝试使用固定的表头，但它不是固定的，它可以滚动。我不想scroll 一个表头，我想要一个固定的表头。请帮我解决它。

这是我的代码示例：

这是我的代码：

  <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>

【问题讨论】：

标签： css twitter-bootstrap html-table tableheader

【解决方案1】：

尝试在广告上使用 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>

【讨论】：

先生，我使用了position:absolute，在文本未对齐之后，position:absolute 或position:fixed？
@core114 为文本“text-align:center”使用另一个属性

【解决方案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/

【讨论】：