Как разбить HTML DIV TABLE на 2 раздела? - PullRequest
Новая
       12

Как разбить HTML DIV TABLE на 2 раздела?

0 голосов
/ 10 октября 2019

У меня есть таблица с ценами div с 10 столбцами. Ниже приведен пример фрагмента таблицы.

У меня сейчас проблема в том, что таблица слишком широка на экране. Я хотел бы сделать первые 5 элементов сверху, а остальные 5 элементов под ним.

Можно ли это сделать с помощью css, чтобы разбить таблицу на две секции?

Спасибо! 

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
<html>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Item 1</div>
<div class="divTableCell">Item 2</div>
<div class="divTableCell">Item 3</div>
<div class="divTableCell">Item 4</div>
<div class="divTableCell">Item 5</div>
<div class="divTableCell">Item 6</div>
<div class="divTableCell">Item 7</div>
<div class="divTableCell">Item 8</div>
<div class="divTableCell">Item 9</div>
<div class="divTableCell">Item 10</div>
</div>
<div class="divTableRow">
<div class="divTableCell">aaa</div>
<div class="divTableCell">bbb</div>
<div class="divTableCell">ccc</div>
<div class="divTableCell">ddd</div>
<div class="divTableCell">eee</div>
<div class="divTableCell">fff</div>
<div class="divTableCell">ggg</div>
<div class="divTableCell">hhh</div>
<div class="divTableCell">iii</div>
<div class="divTableCell">jjj</div>
</div>
</div>
</div>
</html>

1 Ответ

0 голосов
/ 10 октября 2019

Это не может быть сделано с помощью CSS только с использованием этой структуры DOM. Вам нужно изменить структуру, возможно, две таблицы одну за другой.

Примечание: вы должны использовать table элементы вместо div s для таблиц. Также посмотрите на flexbox.

Вот пример с минимальными изменениями: 

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
<html>
<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">Item 1</div>
            <div class="divTableCell">Item 2</div>
            <div class="divTableCell">Item 3</div>
            <div class="divTableCell">Item 4</div>
            <div class="divTableCell">Item 5</div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">aaa</div>
            <div class="divTableCell">bbb</div>
            <div class="divTableCell">ccc</div>
            <div class="divTableCell">ddd</div>
            <div class="divTableCell">eee</div>
        </div>
    </div>
</div>

<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">Item 6</div>
            <div class="divTableCell">Item 7</div>
            <div class="divTableCell">Item 8</div>
            <div class="divTableCell">Item 9</div>
            <div class="divTableCell">Item 10</div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">fff</div>
            <div class="divTableCell">ggg</div>
            <div class="divTableCell">hhh</div>
            <div class="divTableCell">iii</div>
            <div class="divTableCell">jjj</div>
        </div>
    </div>
</div>
</html>
...