固定的标题滚动表-对齐尺寸问题

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;
}

我的琴身现在与标头大小相同，因此对齐方式不正确。这是因为滚动条的大小。

使用Bootstrap3。如果可能，仅使用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;
}

EDIT由于我们是引导程序，因此我们使用类而不是％作为宽度。我们有12个网格可应用]