#html #css #html-table
#HTML #css #html-таблица
Вопрос:
Я пытаюсь создать HTML-страницу с пропорциональной таблицей, используя только элементы div. Я хочу, чтобы левый столбец занимал 60% ширины таблицы и имел 3 строки. Для 2-го столбца я хочу, чтобы он занимал оставшиеся 40% ширины таблицы и имел 4 строки, каждая строка с 2 ячейками.
Вот моя HTML-разметка: почему я вижу только первый (левый) столбец?
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #DDDDDD;
}
#MasterDiv {
display: table;
height: 100%;
width: 100%;
}
.left {
display: table-column;
width: 60%;
}
.right {
display: table-column;
width: 40%;
}
.A {
height: 30%;
display: table-row;
}
.B {
height: 35%;
display: table-row;
}
.B2 {
height: 25%;
display: table-row;
}
.C1 {
display: table-cell;
background: #ff00ff;
}
.C2 {
display: table-cell;
background: #ffffff;
}
.C3 {
display: table-cell;
background: #0000ff;
}
.C4 {
display: table-cell;
background: #ff0000;
}
.C5 {
display: table-cell;
background: #00ff00;
}
.C6 {
display: table-cell;
background: #000000;
}
<div id="MasterDiv">
<div class="left"></div>
<div class="right"></div>
<div class="A">
<div class="C1"></div>
</div>
<div class="B">
<div class="C2"></div>
</div>
<div class="B">
<div class="C3">
</div>
</div>
<div class="B2">
<div class="C1"></div>
<div class="C2"></div>
</div>
<div class="B2">
<div class="C3"></div>
<div class="C4"></div>
</div>
<div class="B2">
<div class="C5"></div>
<div class="C6"></div>
</div>
<div class="B2">
<div class="C4"></div>
<div class="C6"></div>
</div>
</div>
Ответ №1:
вам нужно вложить свои строки и столбцы в левый и правый разделы. На данный момент вы объявляете left и right, но внутри них нет содержимого, и есть сочетание элементов table и div, которые могут запутать ситуацию.
Я создал div-единственный пример того, что вы описали выше. Разделы «строки» слева занимают 100%, а «разделенные столбцы» занимают 50% «правой» ширины. Высота зависит от содержимого, но если вы хотите указать, вы можете сделать это, добавив идентификатор или класс.
.container {
width: 100%;
font-family: Helvetica, Sans-Serif;
}
.left,
.right,
.split-column {
float: left;
background-color: #f9f9f9;
}
.left {
width: 60%;
}
.right {
width: 40%;
}
.split-column {
width: 50%;
background-color: lightblue;
}
<div class="container">
<div class="left">
<div class="row">
row 1
</div>
<div class="row">
row 2
</div>
<div class="row">
row 3
</div>
</div>
<div class="right">
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
<div class="split-column">
cell 1
</div>
<div class="split-column">
cell 2
</div>
</div>