引導表單元格未對齊

Question

我添加了我的代碼片段，面臨修復 header 表的問題

 table-fixed tbody { height: 300px; overflow-y: auto; width: 100%; }.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { display: block; }.table-fixed tbody td, .table-fixed tbody th, .table-fixed thead>tr>th { float: left; position: ative; &::after { content: ''; clear: both; display: block; } }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-xs-5 col-sm-6 col-lg-8 rounded shadow"> <div class="table-responsive"> <table class="table table-fixed"> <thead> <tr> <th scope="col" class="col-3">#</th> <th scope="col" class="col-3">First</th> <th scope="col" class="col-3">Last</th> </tr> </thead> <tbody> <tr> <th scope="row" class="col-3">1</th> <td class="col-3">Mark</td> <td class="col-3">Otto</td> </tr> <tr> <th scope="row" class="col-3">2</th> <td class="col-3">Jacob</td> <td class="col-3">Thornton</td> </tr> </tbody> </table> </div><!-- End --> </div>

結果：

在此處輸入圖像描述

如您所見，表格行沒有正確對齊。 每行有 3 個 header 單元格和 3 個單元格。 但是，當我在 header 和兩個主體行中再添加一個單元格（4 個 header 單元格，每行 4 個單元格）時，一切正常。 我從 Web (https://bootstrapious.com/p/bootstrap-table-with-a-fixed-header ) 得到這個代碼，不知道這里有什么問題。

Answer 1

像這樣在正文中用 td 替換你的 th ：

<div class="col-xs-5 col-sm-6 col-lg-8 rounded shadow">
    <div class="table-responsive">
      <table class="table table-fixed">
        <thead>
          <tr>
            <th scope="col" class="col-3">#</th>
            <th scope="col" class="col-3">First</th>
            <th scope="col" class="col-3">Last</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td scope="row" class="col-3">1</td>
            <td class="col-3">Mark</td>
            <td class="col-3">Otto</td>
          </tr>
          <tr>
            <td scope="row" class="col-3">2</td>
            <td class="col-3">Jacob</td>
            <td class="col-3">Thornton</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>