Блог

Главная - Вопросы по программированию - Дизайн таблицы — внутренняя таблица?

Дизайн таблицы — внутренняя таблица?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

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

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

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

введите описание изображения здесь

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

Ответ №1:

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

Осторожно, может быть сложно контролировать ширину этих столбцов. Любая "ширина" для td / th, имеющая colspan, будет проигнорирована. Укажите ширину первого td в столбце, который имеет 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>