Фиксированная шапка у таблицы не совпадает с колонками (Bootstrap)
Сделал таблицу с прокруткой и растяжением по ширине. Одна проблема - фиксированные заголовки таблицы не совпадают по ширине с колонками. Как достичь результата, чтобы все растягивалось ровно, как в Экселе.
.table-fixed-head {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
height: 100vh;
}
.table-fixed-head th,
.table-fixed-head td {
padding: 1px;
text-align: center;
width: 33.333vw;
}
.table-fixed-head thead {
background-color: #fff;
color: #000;
display:table;
}
.table-fixed-head thead tr {
display: block;
position: relative;
}
.table-fixed-head tbody {
display: block;
overflow: auto;
width: 100%;
height: calc(100vh - 700px);
}
.table-fixed-head tbody tr:nth-child(even) {
background-color: #ааа;
}<table class="table-fixed-head table-bordered ">
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>Ответы (1 шт):
Автор решения: humster_spb
→ Ссылка
Предлагаю Вам рассмотреть вариант с внутренними независимыми друг от друга таблицами: в одну помещаете заголовки, а в другую - содержимое ячеек:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
width: 4.667%;
word-break: break-all;
padding: 2px 5px;
text-align: center;
}
th:nth-of-type(2),
th:nth-of-type(4),
th:nth-of-type(6),
.tbody-wrap td:nth-of-type(2),
.tbody-wrap td:nth-of-type(4),
.tbody-wrap td:nth-of-type(6){
width: 10%;
}
.thead-wrap {
overflow-y: scroll;
background-color: pink;
}
.tbody-wrap {
height: 50vh;
overflow: auto;
}
.tbody-wrap tr:nth-child(even) {
background-color: silver;
}<table>
<tr>
<td colspan="18">
<div class="thead-wrap">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 3</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="18">
<div class="tbody-wrap">
<table>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Наименование будет раскрываться</td>
<td>2323232</td>
<td>1Рвыпвлыгнвефпывфывфывфывфывфы</td>
<td>2</td>
<td>ОРРвывоывыворыоврыв</td>
<td>0211621</td>
<td>10</td>
<td>122</td>
<td>23232</td>
<td>223232</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>