Как сделать таблицу с помощью div'ов
Необходимо сделать таблицу (пример http://htmlbook.ru/html/td/rowspan), чтобы ячейки были объедены по вертикали, как это сделать с помощью тега div? Спасибо
Необходимо сделать таблицу (пример http://htmlbook.ru/html/td/rowspan), чтобы ячейки были объедены по вертикали, как это сделать с помощью тега div? Спасибо
body {
margin: 0;
padding: 50px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
.tablewrapper {
position: relative;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
padding: 1em;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
Top left
Center
Top right
Bottom left
Bottom right
html:
Ячейка 1
Ячейка 2
Ячейка 3
css:
#wrapp{
height: 120px;
width: 300px;
background: #ccc;
border: 1px solid black;
text-align: center;
}
#row1 {
height: 120px;
width: 140px;
border: 1px solid black;
float: left;
line-height: 120px;
}
#right {
height: 100%;
width: 156px;
border: 1px solid black;
float: right;
}
.rows2, .rows3 {
width: 156px;
border-bottom: 2px solid black;
height: 58px;
line-height: 58px;
}
.rows3 {
border: none;
}