引导表单元格未对齐

Posted 2023-03-05

【中文标题】引导表单元格未对齐

【英文标题】：Bootstrap table cells are not aligned

【发布时间】：2021-06-16 08:20:33

【问题描述】：

我已经添加了我的代码 sn-p，面临固定头表的问题

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) 得到了这段代码，不知道这里出了什么问题。

【参考方案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>

【讨论】：

它没有帮助。我认为 CSS 存在问题，但我不确定。

嗯，也许它的类，你正在使用一个 col-3 类连续，col clas 是列。如果您有兴趣，我还有其他桌子