вертикальный заголовок таблицы?

<p>как сделать так, чтобы заголовок таблицы отображался на левой стороне таблицы в виде столбца, а не наверху в виде строки? у меня есть эта разметка:</p><pre><code><table> <thead> <tr> <th>a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> </tbody> </table> </code></pre>

<p>как это?</p><h3>пример</h3><p><img src="https://i.stack.imgur.com/8nxzl.png" alt="example"></p><h3>css</h3><pre><code>thead { float: left; } thead th { display: block; } tbody { float: right; } </code></pre><p> <a href="http://jsfiddle.net/alexdickson/tcjjj/">jsfiddle</a> .</p><h2>обновление</h2><blockquote> <p>ну, 1, 2 также должны быть в виде столбца, очевидно.</p> </blockquote><p> <a href="http://jsfiddle.net/alexdickson/ubu52/">jsfiddle</a> .</p><p>это также выглядит как ie недоразумение в этом. возможно, вам придется обменять семантику на совместимость с различными браузерами.</p>

<p>просто используйте <code><th></code> в качестве первого элемента в строке. затем добавьте атрибут <code>scope</code>, который не оказывает никакого визуального воздействия, но вы можете использовать его, например, в css.</p><pre><code><table> <tbody> <tr> <th scope="row">a</th> <td>b</td> </tr> <tr> <th scope="row">c</th> <td>d</td> </tr> </tbody> </table> </code></pre><p>смотрите также <a href="http://www.w3.org/tr/wcag20-techs/h63">http://www.w3.org/tr/wcag20-techs/h63</a> </p>

<p>вы можете увидеть результат <a href="http://jsfiddle.net/erwaw/">здесь</a> . вы имеете в виду, как это?</p><pre><code><table border="1"> <thead> <tr> <th></th> <th colspan="2">letters</th> </tr> <tr> <th></th> <th>a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td rowspan="3">numbers</td> <td>1</td> <td>4</td> </tr> <tr> <td>2</td> <td>5</td> </tr> <tr> <td>3</td> <td>6</td> </tr> </tbody> </table> </code></pre><p>обычно вы используете <code>rowspan</code> и <code>colspan</code> для ячеек, охватывающих несколько столбцов/строк.</p>

<p>мне нужно было что-то немного другое, но ответы от <a href="https://stackoverflow.com/a/5800696">@alex</a> и <a href="https://stackoverflow.com/a/37790154">@marion</a> заставили меня начать в правильном направлении. проблема заключалась в том, что когда вам нужно было много элементов в таблице, «колонки» начали смешно складываться на маленьких экранах.</p><p>спасибо сержу за его ответ <a href="https://stackoverflow.com/a/30423904">здесь</a> который привел меня к этому решению. это решение позволяет осуществлять горизонтальную прокрутку и не смешно, независимо от размера экрана/окна. я тестировал его в chrome, firefox, opera, edge и ie11. вот скрипка с правильным выравниванием для новых «строк» и «столбцов»: <a href="https://jsfiddle.net/berrym/6r3zvaef/21/">https://jsfiddle.net/berrym/6r3zvaef/21/</a> </p><p>и на всякий случай исчезает из jsfiddle:</p><pre><code><style> table{ display:block; white-space:nowrap; width:100%; } td, th { border-bottom: 1px solid red; border-collapse: collapse; } thead { float: left; background: yellow; width: 10%; } thead tr { width:100%; float:left; } thead th { display: block; } tbody { float: left; width: 90%; } tbody tr { display: inline-block; } tbody td { float:left; width:100%; } </style> <table> <thead> <tr> <th>a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> </tbody> </table> </code></pre>

<p>это отлично сработало для меня: (вдохновленный первым ответом)</p><p>пример <a href="https://jsfiddle.net/marionleherisson/6r3zvaef/">здесь</a> </p><p>html:</p><pre><code> <table> <thead> <tr> <th>a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td>a1</td> <td>b1</td> </tr> <tr> <td>a2</td> <td>b2</td> </tr> <tr> <td>a3</td> <td>b3</td> </tr> </tbody> </table> </code></pre><p>css: </p><pre><code>table, td, th { border: 1px solid red; } thead { float: left; } thead th { display: block; background: yellow; } tbody { float: left; } tbody tr { display: block; float: left; } tbody td { display: block; } </code></pre>

<p>если вы используете загрузчик, вы можете легко добиться этого с помощью стиля <code>table-reflow</code>: <a href="http://v4-alpha.getbootstrap.com/content/tables/#reflow">http://v4-alpha.getbootstrap.com/content/tables/#reflow</a> </p>