Как заставить столбец отображаться в следующей строке?
У меня больше пяти колонок на шесть, в будущем она увеличится. Я должен отображать каждую строку с тремя столбцами. Итак, как мне заставить столбец отображаться в следующей строке? Я установил родительский класс display: table и дочерний класс display:table-cell, потому что мне нужно отображать одинаковую высоту столбца.
.table {
display: table;
border-collapse: separate;
border-spacing: 30px 0px;
width: 100%;
}
.row { display:table-row;width: 100%; }
li{
display:table-cell;
padding:5px;
background-color: gold;
width: 33.33%;
text-align: center;
}<div class = "table">
<ul class = "row">
<li>Cell 1</li>
<li>Cell 2</li>
<li>Cell 3</li>
<li>Cell 4</li>
<li>Cell 5</li>
<li>Cell 6</li>
</ul>
</div>@ Джереми, верно. как это установить? как я могу заставить столбец устанавливать только три в каждой строке?
Поскольку их должно быть 3 в ряд, я думаю, вам нужно сделать (для этого примера) 2 <ul class='row'> с каждыми 3 элементами <li> внутри него.
Я бы отказался от отображения таблицы и просто выбрал flexbox или аналогичный способ организации этого представления. Таблица отображения - плохой выбор для нетабличных данных, поскольку она указывает на определенный уровень семантики.
Ответы 3
К сожалению, вам нужно будет добавить оболочку row вокруг каждого набора столбцов без использования другого метода компоновки (например, flexbox).
Поскольку у вас уже есть ответ Flexbox (см. Ответ @ Shiva), вот табличный ответ с оболочками строк и table-layout: fixed;. Примечание. Я также изменил ваши ul и li на div, чтобы удалить некоторые автоматические CSS, которые применяются к элементам списка.
.table {
display: table;
border-collapse: separate;
border-spacing: 30px 30px;
width: 100%;
table-layout: fixed;
}
.row { display:table-row;width: 100%; }
.cell {
display:table-cell;
padding:5px;
background-color: gold;
width: 33.33%;
text-align: center;
}<div class = "table">
<div class = "row">
<div class = "cell">Cell 1</div>
<div class = "cell">Cell 2</div>
<div class = "cell">Cell 3</div>
</div>
<div class = "row">
<div class = "cell">Cell 4</div>
<div class = "cell">Cell 5</div>
<div class = "cell">Cell 6</div>
</div>
</div>Обновлено:
Я по-прежнему думаю, что вам следует рассмотреть другой метод компоновки (например, flexbox), но если вы хотите использовать макет таблицы CSS с ячейками переменной ширины, вы можете фактически использовать table вместо эмуляции и использовать colspan атрибут. Обратите внимание, что это очень старая школа, и ее вряд ли следует считать полезной для реального макета. Если вы показываете табличные данные, это нормально, но если вы выкладываете более сложный контент, посмотрите на гибкий блок (был предоставлен ответ, который должен работать для вас), CSS Grid или сеточные фреймворки, такие как Ungrid.
Тем не менее, вот макет стола:
table {
border-collapse: separate;
border-spacing: 30px 30px;
width: 100%;
table-layout: fixed;
}
td {
padding:5px;
background-color: gold;
text-align: center;
}<table>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td colspan = "3">Cell 4</td>
</tr>
</tbody>
</table>Что делать, если у меня всего 4 столбца, потому что последний получает 100% цвет фона
Если вам нужен динамический макет, обратите внимание на Flexbox, CSS Grid или такую платформу, как Ungrid. Если вам нужна элементарная таблица, отбросьте CSS и фактически используйте таблицу. Я обновил ответ, включив в него макет таблицы, как вы описали.
Я тоже предпочитаю этот. Вы можете увидеть здесь: JSFiddle
* {
box-sizing: border-box;
}
.table .row {
display: flex;
flex-wrap: wrap;
list-style:none
}
.table .row li {
background: orange;
width: 33%;
text-align: center;
line-height: 100px;
border: 5px solid white;
}
.table + .table li {
background: olive;
}<div class = "table">
<ul class = "row">
<li>Cell 1</li>
<li>Cell 2</li>
<li>Cell 3</li>
<li>Cell 4</li>
<li>Cell 5</li>
<li>Cell 6</li>
</ul>
</div>
<div class = "table">
<ul class = "row">
<li>Cell 1</li>
<li>Cell 2</li>
<li>Cell 3</li>
<li>Cell 4</li>
</ul>
</div>@ user9437856 - Вам стоит почитать о Flexbox. Вы можете видеть, что он работает автоматически для обоих описанных вами сценариев использования (4 столбца со 100% шириной 4-го столбца, а также 6 четных столбцов) - без какой-либо дополнительной разметки или CSS. Я бы пошел по этому пути, если бы мне специально не понадобился Табличное представление данных.
Этого легко добиться с помощью CSS-сетки. Вы можете добавить как можно больше элементов внутри div-оболочки. Более того, он будет отзывчивым.
body{
margin:20px;
}
.wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:100px;
grid-gap:5px;
}
.wrapper > div{
display:flex;
justify-content:center;
align-items:center;
color:#fff;
background:#FF8966;
}<div class = "wrapper">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
<div>Cell 4</div>
<div>Cell 5</div>
<div>Cell 6</div>
</div>
О чем сейчас думает ваш html: «Ммм, я вижу строку шириной 100%, а внутри этих 6 элементов списка шириной 33% это 6 x 33% = 200% .... Подождите. как мне сделать так, чтобы это поместилось внутри строки шириной 100%? ".