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表格属性，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和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，你更喜欢（我知道我这样做:)。

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

1 个答案: