表格设计--内部表格？

Question

这是我目前的小提琴：

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

我想以这样的方式设计这个表，它看起来像这样：

​

​

如何嵌套像这里模拟的那样的内部表？我不确定这是不是正确的方法，所以请建议。

Answer 1

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

注意，很难控制这些列的宽度。具有colspan的td/th的任何'width‘都将被忽略。将宽度放在具有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>