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

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

a b
1 2

Как это?

пример

пример

CSS

 thead { float: left; } thead th { display: block; } tbody { float: right; } 

jsFiddle .

Обновить

Ну, очевидно, что 1, 2 также должны быть в виде столбца.

jsFiddle .

Это также выглядит как IE baulks. Возможно, вам придется торговать семантикой для кросс-браузерной совместимости.

Просто используйте

в качестве первого элемента в строке. Затем добавьте атрибут scope , который не имеет визуального воздействия, но вы можете использовать его, например, в CSS.

 
A b
C d

См. Также http://www.w3.org/TR/WCAG20-TECHS/H63

Это отлично сработало для меня: (вдохновленный первым ответом)

Пример здесь

html:

  
A B
a1 b1
a2 b2
a3 b3

css:

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

Вы можете увидеть результат здесь . Вы имеете в виду вот так?

 
Letters
a b
Numbers 1 4
2 5
3 6

Обычно вы используете rowspan и colspan для ячеек, охватывающих несколько столбцов / строк.

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

Мне было нужно что-то совсем другое, но ответы @alex и @marion заставили меня начать в правильном направлении. Проблема заключалась в том, что, когда вам нужно было много элементов в таблице, «столбцы» начали смешать на меньших экранах.

Спасибо Сергею за его ответ, который привел меня в этом решении. Это решение позволяет прокручивать по горизонтали и не складывать смешно независимо от размера экрана / windows. Я тестировал его в Chrome, Firefox, Opera, Edge и IE11. Вот скрипка с правильным выравниванием для новых «строк» ​​и «столбцов»: https://jsfiddle.net/berrym/6r3zvaef/21/

И на всякий случай он исчезает из JSFiddle:

  
A B
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3
a1 b1
a2 b2
a3 b3