Как разместить заголовки таблицы над ячейками таблицы, если они находятся в одной строке таблицы?

Question

У меня есть такая таблица:

<table>
  <tr>
    <th>Header</th>
    <td>Content</td>
  </tr>
  <tr>
    <th>Header</th>
    <td>Content</td>
  </tr>
</table>

Как сделать так, чтобы заголовок действительно плавал над ячейкой содержимого, не помещая все в отдельную строку? Например:

Header
Content

Header
Content

Answer 1

Вы не предоставляете много информации, но вам может быть лучше использовать список определений, а не искаженную таблицу, в зависимости от семантики:

<dl>
    <dt>Header</dt>
    <dd>Content</dd>

    <dt>Header</dt>
    <dd>Content</dd>
</dl>

Это даст вам вывод, чтовыглядит примерно так:

Header
   Content

Header
   Content

В таком случае стиль с помощью css тривиален, поскольку заголовки - это dt, а содержимое - это dd:

dt { font-weight: bold; font-size: 200%; }
dd { color: #999; }

См. также:

• http://www.maxdesign.com.au/articles/definition/
• http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
• http://www.w3schools.com/tags/tag_dl.asp

Answer 2

Попробуйте это в своем CSS:

td,th{display:block;}