如何让表格尊重Bootstrap 3中的网格？

Question

即使表定义了col-xs-X类，Bootstrap表也不会尊重网格。

这是一个最小的例子，显示（红色）表格如何与（灰色）网格对齐：http://jsfiddle.net/fm65v3e0/

.col-xs-1 {
  background-color: #eee;
  border: 1px solid #999;
}

th {
  background-color: #fee;
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="table-responsive">
        <table class="table">
          <tr>
             <th class="col-xs-5">
               5-col header
             </th>
             <th class="col-xs-3">
               3-col header
             </th>
             <th class="col-xs-4">
               4-col header
             </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

因为表格出现在一列中，所以它在外面有一定量的填充。如果我从列中删除填充，表格会排成一行，但当然现在列中的任何文本都将与下一列齐平。

此外，默认情况下，Bootstrap表的宽度为100％，如果不使用全部12列，则分配任何“备用”空间。

我的网站几乎完全是表格数据，所以如果我没有我的表格尊重网格，有点像我根本不使用网格。你认为我能轻易解决这个问题吗？尝试解决它/关心它是错误的吗？

Answer 1

您的bootstrap CSS将padding-right: 15px和padding-left: 15px添加到所有col-xx-xx元素。

删除或覆盖填充，事物应正确对齐。下图显示了删除填充时Bootply中发生的情况

重写此方法的一种方法是创建一个名为no-padding的类，如下所示：

.no-padding {
     padding-left: 0;
     padding-right: 0
}

并将其应用于您不希望应用填充的任何元素。 Here's an updated JS Fiddle showing this