固定标题滚动表 - 对齐大小问题

Question

我正在尝试使用此示例 enter link description here 并制作一个带有固定标题和滚动的漂亮表格。我使用 4 个不同宽度的列，例如 10%、50%、30% 和 10%。我这样做是因为我在不同的屏幕上测试页面视图，这是最适合所有屏幕的。

我的问题是所有行与标题的宽度不同，这会导致对齐问题。

我的 HTML：

<table class="table table-hover table-fixed" id="example" style="width:100%; margin-top:20px;font-size:90%;">
  <thead>
    <tr>
      <th style="width:10%;">#</th>
      <th style="width:50%;">Name</th>
      <th style="width:30%;">Enabled</th>
      <th style="width:10%;">Action</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <td>12</td>
      <td>Something here...</td> 
      <td>Yes</td> 
      <td><a href="###" class="btn btn-success btn-sm">Edit</a></td>
    </tr>
    <tr>
      <td>23</td>
      <td>Something here... part 2</td> 
      <td>No</td> 
      <td><a href="###" class="btn btn-success btn-sm">Edit</a></td>
    </tr>
    <tr>
      <td>35</td>
      <td>Something here... part 3</td> 
      <td>Yes</td> 
      <td><a href="###" class="btn btn-success btn-sm">Edit</a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>#</th> 
      <th>Name</th> 
      <th>Enabled</th> 
      <th>Action</th> 
    </tr>                    
  </tfoot>
</table>

我的 CSS：

.table-fixed thead, .table-fixed tfoot {
width: 100%;
}

.table-fixed tbody {
height: 450px;
overflow-y: auto;
width: 100%;
padding-left:-5px;
}

.table-fixed thead, .table-fixed tbody, .table-fixed tfoot, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}

.table-fixed tbody td, .table-fixed thead > tr> th, .table-fixed tfoot > tr> th {
float: left;
border-bottom-width: 0px;
}

我的 tbody 现在与 header 大小相同，因此对齐不正确。这是因为滚动条的大小。

使用 Bootstrap 3。如果可能，仅使用 css。

Answer 1

您必须添加到您的 CSS（因为滚动条需要空间）这有效：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="panel panel-default">

    <h4>
      Fixed Header Fixed height Scrolling Table
    </h4>

    <table class="table table-fixed">
      <thead>
        <tr>
          <th class="col-sm-1">#</th>
          <th class="col-sm-6">Name</th>
          <th class="col-sm-4">Enabled</th>
          <th class="col-sm-1">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-sm-1">12</td>
          <td class="col-sm-6">Something here...</td>
          <td class="col-sm-4">Yes</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
                   <tr>
          <td class="col-sm-1">23</td>
          <td class="col-sm-6">Something here... part 2</td>
          <td class="col-sm-4">No</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">35</td>
          <td class="col-sm-6">Something here... part 3</td>
          <td class="col-sm-4">Yes</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">23</td>
          <td class="col-sm-6">Something here... part 2</td>
          <td class="col-sm-4">No</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">35</td>
          <td class="col-sm-6">Something here... part 3</td>
          <td class="col-sm-4">Yes</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">23</td>
          <td class="col-sm-6">Something here... part 2</td>
          <td class="col-sm-4">No</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">35</td>
          <td class="col-sm-6">Something here... part 3</td>
          <td class="col-sm-4">Yes</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">23</td>
          <td class="col-sm-6">Something here... part 2</td>
          <td class="col-sm-4">No</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
        <tr>
          <td class="col-sm-1">35</td>
          <td class="col-sm-6">Something here... part 3</td>
          <td class="col-sm-4">Yes</td>
          <td class="col-sm-1"><a href="###" class="btn btn-success btn-sm">Edit</a></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th class="col-sm-1">#</th>
          <th class="col-sm-6">Name</th>
          <th class="col-sm-4">Enabled</th>
          <th class="col-sm-1">Action</th>
        </tr>
      </tfoot>

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

CSS：==> 宽度：97%；成功了

.table-fixed thead .table-fixed tfoot{
  width: 97%;
}
.table-fixed tbody {
  max-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 thead > tr> th {

  border-bottom-width: 0;
}

编辑 因为我们是 inbootstrap，所以我们使用类而不是 % 作为宽度。我们有 12 个网格要应用