заголовок таблицы не является относительным или липким

Question

Я использую bootstrap, html и css. Когда я прокручиваю, заголовок таблицы не движется вместе с данными. Я пробовал липкую вершину и относительную позицию. Нет удачи.

 <div class="tab-div"><table class="table table-bordered table-hover table-sm table-responsive{-sm|-md|-lg|-xl}">
    <thead class="table-head sticky-top">

        <tr class="tr-tab">
          <td class="text-align-center text-header" >Employee Number</td>
          <td class="text-align-center text-header">Employee Name</td>
          <td class="text-align-center text-header">Designation</td>
          <td class="text-align-center text-header">Deapartment</td>
        </tr>

      </thead>
      <tbody>
          <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>

 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>
 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>
 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>
 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>
 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>
 <tr>
              <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value="test"/></td>
              <td><input type="input" name="empName" value="test"/></td>
              <td><input type="input" name="empDesig" value="test"/></td>
              <td><input type="input" name="empDept" value="test"/></td>
          </tr>

 </tbody>
</table>
</div>

Я просмотрел несколько руководств и не смог найти решение моей проблемы. Может быть, это проблема с моим пониманием. Может ли кто-нибудь предложить решение для этого? , Я продублировал несколько строк для тестирования.

Answer 1

Это должно дать вам "липкую" шапку таблицы:

ПОДСКАЗКА: добавьте "липкую вершину" к TD, а не к самой thead!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tab-div">
  <table class="table">
    <thead class="table-head">
      <tr class="tr-tab">
        <td class="text-align-center text-header bg-white sticky-top">Employee Number</td>
        <td class="text-align-center text-header bg-white sticky-top">Employee Name</td>
        <td class="text-align-center text-header bg-white sticky-top">Designation</td>
        <td class="text-align-center text-header bg-white sticky-top">Deapartment</td>
      </tr>

    </thead>
    <tbody>
      <tr>
        <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value=" test " /></td>
              <td><input type="input " name="empName " value="test "/></td>
              <td><input type="input " name="empDesig " value="test "/></td>
              <td><input type="input " name="empDept " value="test "/></td>
          </tr>

 <tr>
              <td><input type="input " name="empNo " readonly class="form-control-plaintext col-md-1 value="test" /></td>
        <td><input type="input" name="empName" value="test" /></td>
        <td><input type="input" name="empDesig" value="test" /></td>
        <td><input type="input" name="empDept" value="test" /></td>
      </tr>
      <tr>
        <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value=" test "/></td>
              <td><input type="input " name="empName " value="test "/></td>
              <td><input type="input " name="empDesig " value="test "/></td>
              <td><input type="input " name="empDept " value="test "/></td>
          </tr>
 <tr>
              <td><input type="input " name="empNo " readonly class="form-control-plaintext col-md-1 value="test" /></td>
        <td><input type="input" name="empName" value="test" /></td>
        <td><input type="input" name="empDesig" value="test" /></td>
        <td><input type="input" name="empDept" value="test" /></td>
      </tr>
      <tr>
        <td><input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value=" test "/></td>
              <td><input type="input " name="empName " value="test "/></td>
              <td><input type="input " name="empDesig " value="test "/></td>
              <td><input type="input " name="empDept " value="test "/></td>
          </tr>
 <tr>
              <td><input type="input " name="empNo " readonly class="form-control-plaintext col-md-1 value="test" /></td>
        <td><input type="input" name="empName" value="test" /></td>
        <td><input type="input" name="empDesig" value="test" /></td>
        <td><input type="input" name="empDept" value="test" /></td>
      </tr>
      <tr>
        <td>
          <input type="input" name="empNo" readonly class="form-control-plaintext  col-md-1 value=" test "/></td>
              <td><input type="input " name="empName " value="test "/></td>
              <td><input type="input " name="empDesig " value="test "/></td>
              <td><input type="input " name="empDept " value="test "/></td>
          </tr>

 </tbody>
</table>
</div>