如何修复使用colspan时填充的Twitter引导单元表

Question

我试图创建学习表，使用Twitter启动3作为css框架。我用<td colspan="2">做一小时细胞，<td>用半小时细胞，所以我有17个细胞(8小时加1天细胞)。

<table class="table table-striped">
   <thead>
      <tr>
         <th>#</th>
         <th colspan="2">9.000 - 10.00</th>
         <th colspan="2">10.00 - 11.00</th>
         <th colspan="2">11.00 - 12.00</th>
         <th colspan="2">12.00 - 13.00</th>
         <th colspan="2">13.00 - 14.00</th>
         <th colspan="2">14.00 - 15.00</th>
         <th colspan="2">15.00 - 16.00</th>
         <th colspan="2">16.00 - 17.00</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Mon</td>
         <td></td>
         <td class="study-table-hightlight" colspan="6">ITE-301, S1<br >A603, 86</td>
         <td colspan="3"></td>
         <td class="study-table-hightlight" colspan="6">ITE-204, S1<br >D201, 81</td>
      </tr>
      <tr>
         <td>Tuえ</td>
         <td colspan="4"></td>
         <td class="study-table-hightlight" colspan="6">ITE-302, S1<br >A602, 40</td>
         <td class="study-table-hightlight" colspan="6">HUM-111, S1<br >B202, 81</td>
      </tr>
      <tr>
         <td>Wed</td>
         <td></td>
         <td class="study-table-hightlight" colspan="3">MSC-202, S1<br >A313, 41</td>
         <td colspan="3"></td>
         <td class="study-table-hightlight" colspan="3">JPN-202, S1<br >D503, 30</td>
         <td colspan="6"></td>
      </tr>
   </tbody>
</table>

我以为它会像这样呈现。

第一个主题应该从上午9点到10点的中心(上午9点30分)开始，但我得到的是这个。

​

它从10.00开始，就好像在设置为td之前的colspan="2"一样，但其余的工作正常。

我试图禁用每个css属性，发现如果禁用width: 100% at .table并将padding: 8px 0px设置为.table>tbody>tr>td，则呈现正确但非常难看。

有什么办法可以找到我想要的桌子吗？

Answer 1

如果你想让它起作用，你必须放弃td和th填充。这不是引导本身的问题，而是html tables的设计方式的问题。回到制作CSS的时候，CSS还没有出现。所有的样式都是内联的或通过属性完成的。在我们的例子中，在cellpadding表属性的帮助下，HTML5不再支持这个属性( Chrome已经放弃了对~v.20-ish的支持)。

所以我想你需要

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 0;
}

这样才能奏效。现在，如果您想要返回填充，则需要将所有单元格内容包装在div中，并将填充应用于这些内容(即：.table td>div, .table th>div{padding: 8px;})。

这是实用的解决方案。

right 解决方案，但是不能使用<table>进行布局。它们是为表格数据而设计的。

下面是一个使用jQuery和CSS的脏lil‘补丁，它动态地向所有非空的td和th的内容中添加div包装器。text-align:center规则不需要它工作，我只是添加它，因为我认为它看起来更好。

​

$('.table th, .table td').each(function() {
  $(this).html($(this).html() ? $('<div>' + $(this).html() + '</div>') : '');
});

table.table>tbody>tr>td,table.table>tbody>tr>th,
table.table>tfoot>tr>td,table.table>tfoot>tr>th,
table.table>thead>tr>td,table.table>thead>tr>th {
  padding: 0;
  border: 1px solid #ddd;
}
.table td > div,.table th>div {
  padding: 8px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th colspan="2">9.000 - 10.00</th>
      <th colspan="2">10.00 - 11.00</th>
      <th colspan="2">11.00 - 12.00</th>
      <th colspan="2">12.00 - 13.00</th>
      <th colspan="2">13.00 - 14.00</th>
      <th colspan="2">14.00 - 15.00</th>
      <th colspan="2">15.00 - 16.00</th>
      <th colspan="2">16.00 - 17.00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon</td>
      <td></td>
      <td class="study-table-hightlight" colspan="6">ITE-301, S1
        <br>A603, 86</td>
      <td colspan="3"></td>
      <td class="study-table-hightlight" colspan="6">ITE-204, S1
        <br>D201, 81</td>
    </tr>
    <tr>
      <td>Tue</td>
      <td colspan="4"></td>
      <td class="study-table-hightlight" colspan="6">ITE-302, S1
        <br>A602, 40</td>
      <td class="study-table-hightlight" colspan="6">HUM-111, S1
        <br>B202, 81</td>
    </tr>
    <tr>
      <td>Wed</td>
      <td></td>
      <td class="study-table-hightlight" colspan="3">MSC-202, S1
        <br>A313, 41</td>
      <td colspan="3"></td>
      <td class="study-table-hightlight" colspan="3">JPN-202, S1
        <br>D503, 30</td>
      <td colspan="6"></td>
    </tr>
  </tbody>
</table>

​

同样，作为小提琴，您更喜欢(我知道我喜欢：)。