1) Это, вероятно, на Mac, который по умолчанию использует полосы прокрутки наложения.Chrome и Safari поддерживают свойства webkit-scroll, которые позволяют сделать его всегда видимым, но не уверены, что вы можете переопределить его в Firefox.
2) Возможно, вы используете таблицу стилей UA th
запись: td, th { padding: 1px; }
Вы можете переопределить его с помощью th { padding: 0px; }
3) То, что вы хотите, на самом деле является поведением таблицы по умолчанию.Но это не работает по двум причинам.Это может быть сложнее всего решить самостоятельно, без использования готового компонента.Так что, если вы не делаете это как упражнение, я предлагаю не пытаться изобретать велосипед.Вместо этого найдите плагин jquery или угловой компонент или что-то, что обеспечивает это.Я не думаю, что можно сделать все это (включая вращение заголовков) совместимым с кросс-браузерным способом способом без написания javascript.
Первая причина заключается в том, что установка div.vertical { position:absolute }
выводит их из нормального состояния.течь;th
позиционирует своих дочерних элементов нормального потока для выравнивания по всему столбцу, но не position:absolute
stuff.
Во-вторых, вы тонко создали 3 таблицы из-за tr { display:block }
и tbody {display:block}
, которые позволяют прокручивать,Код компоновки (приблизительно) воспринимает их как обычные <div>
s, поэтому видит <table><thead><div>...</div></thead><div>....</div></table>
и создает ячейку таблицы, строку и раздел (он же tbody) для хранения каждого <div>
.Затем внутри этого div
он видит tr
, поэтому создает table
для их хранения.
Таким образом, столбцы в таблице, которая находится под thead > tr
, не являются теми же столбцами, которые содержат ваши данные.Поэтому, даже если вы исправите первую причину, вы все равно будете бороться с этим.
Вот дерево макета Chrome (игнорируйте гекс):
LayoutBlockFlow 0x23e069224010 HTML
LayoutBlockFlow 0x23e069224138 BODY
LayoutTable 0x23e069230010 TABLE class="vrt-header"
LayoutTableSection 0x23e069240010 THEAD
LayoutTableRow (anonymous) 0x23e06924c010
LayoutTableCell (anonymous) 0x23e069254010
LayoutBlockFlow 0x23e069224260 TR
LayoutTable (anonymous) 0x23e0692301b0
LayoutTableSection (anonymous) 0x23e069240188
LayoutTableRow (anonymous) 0x23e06924c128
LayoutTableCell 0x23e069254150 TH
LayoutTableCell 0x23e069254290 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e069224388 DIV class="vertical"
LayoutText 0x23e069264010 #text "Republican"
LayoutTableCell 0x23e0692543d0 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e0692244b0 DIV class="vertical"
LayoutText 0x23e0692640e0 #text "Democrat"
LayoutTableCell 0x23e069254510 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e0692245d8 DIV class="vertical"
LayoutText 0x23e0692641b0 #text "Libertarian"
LayoutTableCell 0x23e069254650 TH class="vertical"
LayoutBlockFlow (positioned) 0x23e069224700 DIV class="vertical"
LayoutText 0x23e069264280 #text "Green"
LayoutTableSection (anonymous) 0x23e069240300
LayoutTableRow (anonymous) 0x23e06924c240
LayoutTableCell (anonymous) 0x23e069254790
LayoutBlockFlow 0x23e069224828 TBODY
LayoutTable (anonymous) 0x23e069230350
LayoutTableSection (anonymous) 0x23e069240478
LayoutTableRow 0x23e06924c358 TR
LayoutTableCell 0x23e0692548d0 TD
LayoutText 0x23e069264350 #text "\nAlabama\n"
LayoutTableCell 0x23e069254a10 TD
LayoutText 0x23e069264420 #text "\n65\n"
LayoutTableCell 0x23e069254b50 TD
LayoutText 0x23e0692644f0 #text "\n25\n"
LayoutTableCell 0x23e069254c90 TD
LayoutText 0x23e0692645c0 #text "\n10\n"
LayoutTableCell 0x23e069254dd0 TD
LayoutText 0x23e069264690 #text "\n0\n"
LayoutTableRow 0x23e06924c470 TR
LayoutTableCell 0x23e069254f10 TD
LayoutText 0x23e069264760 #text "\nAlaska\n"