Дизайн стола - внутренний стол?

Question

Вот моя текущая скрипка:

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

Я хочу оформить таблицу таким образом, чтобы она выглядела следующим образом:

Как вкладывать внутренний стол, подобный тому, который здесь макетирован? Я не уверен, что это даже правильный подход, поэтому, пожалуйста, предложите.

Answer 1

colspan и rowspan.Вложенная таблица не будет выравнивать столбцы, если у вас нет абсолютно жесткой ширины или очень сложного JavaScript.

Внимание, может быть сложно контролировать ширину этих столбцов.Любая ширина для td / th, у которого есть colspan, будет игнорироваться.Поместите ширину на первый тд в столбце с colspan = 1.

<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>