Посмотрите на таблицу. Он имеет 3 раздела:
- Заголовки столбцов
- 3 строки со значениями
- Один нижний колонтитул
Я пытаюсь придерживаться нижнего колонтитула внизу страницы. Высота стола должна быть изменчиваема, и мне нужно поместить вертикальную полосу прокрутки, если строки со значениями превышают пределы высоты таблицы. Я не хочу расширять высоту строки значения. Есть ли способ сделать это? (только html/css).
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="table">
<div class="row headers">
<div class="cell col1">Col1</div>
<div class="cell col2">Col2</div>
<div class="cell col3">Col3</div>
</div>
<div class="row">
<div class="cell col1">1</div>
<div class="cell col2">2</div>
<div class="cell col3">3</div>
</div>
<div class="row">
<div class="cell col1">1</div>
<div class="cell col2">2</div>
<div class="cell col3">3</div>
</div>
<div class="row">
<div class="cell col1">1</div>
<div class="cell col2">2</div>
<div class="cell col3">3</div>
</div>
<div class="row footers">
<div class="cell col1">Footer</div>
<div class="cell col2"></div>
<div class="cell col3"></div>
</div>
</div>
</body>
</html>
Стили:
.table{
display:table;
width: 100%;
border: 1px solid #000;
background: #eee;
}
.row{
display:table-row;
}
.headers { color: #505; font-weight: bold;}
.footers { color: #055;}
.cell{
background: #eee;
display:table-cell;
border: 1px solid #fff;
}
.col1 { width:50%;}
.col2 { width:25%;}
.col3 { width:25%;}
Изменить: Моя таблица должна быть вертикально расширяемой, и она должна показывать полосу прокрутки, когда строки внутри верхнего/нижнего колонтитула переполняют высоту таблицы.