html - 如何制作 Bootstrap "table-bordered"Fixed header 和 Scroll body？

Question

我试图固定表头并滚动正文，我使用了下面的 CSS。但这会破坏表格布局。 (标题列的宽度与正文列的宽度不同)。我怎样才能避免这个问题？

#tblLocations thead, tbody {
    display: block;
}

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

Answer 1

以此为例:固定表格和可滚动主体

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