Question

我添加了我的代码片段，但遇到了固定标题表的问题

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>

结果：

enter image description here

如您所见，表格行未正确对齐。每行有 3 个标题单元格和 3 个单元格。但是，当我在标题和两个正文行中再添加一个单元格（4 个标题单元格，每行 4 个单元格）时，一切正常。我从网上 (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>

Bootstrap 表格单元格未对齐

1 个答案: