如何让Bootstrap"table-bordered"固定header和滚动body？

Question

我正在尝试固定 table header 并滚动 body，我使用了下面的 CSS。但这会破坏 table 布局。（header 列的宽度与 body 列的宽度不同）。我怎样才能避免这个问题？

#tblLocations thead, tbody {
    display: block;
}

#tblLocations tbody{   
   max-height: 290px;
   overflow-y:scroll;
}

Answer 1

以此为例：固定 table 和可滚动正文

.tableFixHead {
  overflow-y: auto;
  height: 200px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
}

    <div class="tableFixHead">
      <table>
        <thead>
          <tr>
              <th>Last name</th>
              <th>Points</th>
              <th>Content</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
           
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            
             <tr>
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
             
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            <tr>
            
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
           
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            <tr>
        </tbody>
      </table>
    </div>

Answer 2

添加到@Nisarg 的回答中，只是为了停止让 body 滚动到 header 上而稍微添加了一点。在我的例子中，body 与 header 重叠，添加最后一个 css 解决了问题。

.tableFixHead {
  overflow-y: auto;
  height: 200px;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
}

.tableFixHead tbody tr{
   position: inherit;
}

    <div class="tableFixHead">
      <table>
        <thead>
          <tr>
              <th>Last name</th>
              <th>Points</th>
              <th>Content</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
           
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            
             <tr>
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
             
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            <tr>
            
              <td>Smith</td>
              <td>50</td>
              <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
            </tr>
            <tr>
           
              <td>Jackson</td>
              <td>94</td>
              <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
            </tr>
            <tr>
        </tbody>
      </table>
    </div>

如何让Bootstrap"table-bordered"固定header和滚动body？

How to make Bootstrap "table-bordered" Fixed header and Scroll body?

html

css

twitter-bootstrap-3

css-tables