表设计 - 内表？

Question

这是我当前的小提琴：

http://jsfiddle.net/UjAQf/28/

我想以这样的方式设计表格：

如何在这里嘲弄一个内部表格？我不确定这是否是正确的方法，所以请建议。

Answer 1

colspan和rowspan。除非您有非常严格的宽度或非常困难的JavaScript，否则嵌套表将不会对齐列。

注意，可能很难控制这些列的宽度。具有colspan的td / th的任何“宽度”都将被忽略。将宽度放在colspan = 1的列中的第一个td上。

<thead>
 <tr>
  <th>Sport</th>
  <th>Status</th>
  <th colspan="2">Pick</th>
  <th>Genus></th>
  <th>Genius Credential</th>
  <th>Result</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td colspan="7">MLB Moneyline:...</td>
 </tr>
 <tr>
  <td rowspan="4">[] MLB</td>
  <td rowspan="4">Sat 7:45 PM...</td>
  <td rowspan="4">The <b>Yankees</b> will...</td>
  <!--first row of nested table. It can be tricky-->
  <td>@-105 price</td>
  <td>chris</td>
  <td>MLB AL East...</td>
  <!--/end nested table-->
  <td rowspan="4">--</td>
 </tr>
 <tr> <!-- rest of nested table -->
  <td>@ -106 price</td>
  <td>sean</td>
  <td>...</td>
 </tr>
 <tr>
  <td>@ -105 price</td>
  ...
 </tr>
 ...
 <!-- repeat more rows -->
</tbody>