Как сделать 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>