如何使Bootstrap为“表格边框”固定标头和滚动体？

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>