表 header 不是相對的或粘性的

Question

我正在使用引導程序 html 和 css。 當我滾動表時 header 沒有與數據一起移動。 我嘗試了粘頂和相對位置。 沒運氣。

 <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

這應該給你一個粘性表頭：

提示：將“sticky-top”添加到 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>