表设计 - 内表？

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>