Сделал таблицу с прокруткой и растяжением по ширине. Одна проблема - фиксированные заголовки таблицы не совпадают по ширине с колонками. Как достичь результата, чтобы все растягивалось ровно, как в Экселе.
.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>