表設計 - 內表？

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>