Вертикально складывать элементы таблицы td с помощью css
Есть ли способ вертикально укладывать выбранные элементы td? Я хотел бы иметь такую же таблицу, но отображать ее по-другому, используя только css. Возможно ли это, или мне нужно иметь отдельные разметки html? Я хотел бы попробовать одну и ту же разметку html, но использовать разные CSS для разных сайтов / взглядов.
<table>
<tr>
<td class = "vertical" id = "one" >i'm</td>
<td class = "vertical" id = "two" >above</td>
<td class = "vertical" id = "three" >this</td>
<td class = "horizontal" id = "four" >i'm horizontal</td>
</tr>
</table>
Ответы 3
Вам нужно создать стол с накоплением
<table>
<tr>
<td class = "vertical">i'm</td>
<td class = "horizontal" rowspan = "3">i'm horizontal</td>
</tr>
<tr>
<td class = "vertical">above</td>
</tr>
<tr>
<td class = "vertical">this</td>
</tr>
</table>
Для этого и созданы столы. Если вы хотите использовать CSS, вам нужно использовать DIV.
Извините, но вы не можете «плавать» TD с помощью CSS.
Вы также можете заставить их отображать: block, но я не совсем уверен, какие эффекты это повлияет на компоновку стола.
.vertical{
display:block;
}
Для других, пытающихся добиться этого по какой-либо странной причине, вы можете использовать
.vertical{
display:flex;
}
https://jsfiddle.net/mr5dhwj3/
Мне это было нужно в ситуации с отзывчивостью, когда таблица обычно отображалась горизонтально, но в некоторых случаях только вертикально.
Спасибо. я отредактировал свой вопрос, чтобы было понятнее. Я хотел бы сохранить разметку таблицы html такой же, хотя стилизовать ее по-разному для разных сайтов, используя только css.