html - 使用 colspan 时如何修复填充 Twitter Bootstrap 单元格表

Question

我正在尝试使用 Twitter Bootstrap 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%在.table并设置 padding: 8px 0px至 .table>tbody>tr>td它呈现正确但非常丑陋。

是否有任何解决方法来获取我想要的表？

Answer 1

你不得不放弃td和 th填充，如果你想让它工作。不是Bootstrap本身的问题，而是html的方式tables被设计。在它们被制作出来的时候，CSS 还没有出现。所有样式都是内联或通过属性完成的。在我们的例子中，在 cellpadding 的帮助下table 属性，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;})。
这是实用的解决方案。

正确解决方案，但是不使用 <table>用于布局。它们专为表格数据而设计。

这是一个肮脏的 lil' 修复程序，使用 jQuery 和 CSS，动态地将 div 包装器添加到所有非空 td s 和 th的内容。 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>

也为 fiddle ，你喜欢(我知道我喜欢:)。