Question

HTML

<table class="col-xs-12">
<tbody class="col-xs-12">
  <tr class="col-xs-12">
    <td class="col-xs-3">test</td>
    <td class="col-xs-1">tesst</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-3">test</td>
  </tr>
</tbody>
</table>

CSS

table,td
{
  border:1px solid black;

}
td
{
  background-color:red;
}
table
{
  background-color:green;
}
*
{
  padding : 0 !important;
  margin:0 !important;
}

Here is the fiddle

正如在小提琴中你可以看到虽然td值的网格值总和等于12但是它没有覆盖整个table，但最后还是留有空格（绿色背景区域） table的？为什么？如何克服这个问题？

修改

ShinDarth 建议

您应该始终将列（col- *）包装在一行中：

但是我不同意他，我创建了另一个小提琴，现在用table替换div元素，为什么会出现这种差异呢？

Update Fiddle

Answer 1

您应该始终将列（col- *）包装在一行中：

<table>
<tbody>
  <tr class="row">
    <td class="col-xs-3">test</td>
    <td class="col-xs-1">tesst</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-1">test</td>
    <td class="col-xs-3">test</td>
  </tr>
</tbody>
</table>

https://jsfiddle.net/o30L1t70/2/

Answer 2

将table课程添加到table代码中，而不是col-xs-12。在这种情况下，其他类col-xs-12也是额外的：

<table class="table">
  <tbody>
    <tr>
      <td class="col-xs-3">test</td>
      <td class="col-xs-1">tesst</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-1">test</td>
      <td class="col-xs-3">test</td>
    </tr>
  </tbody>
</table>

JSfiddle-example

带有bootstrap的表的td元素问题

2 个答案: