Я пытаюсь сделать что-то похожее на листы Excel в HTML, но это не работает.Идея состоит в том, чтобы исправить некоторые столбцы в моей таблице и поместить прокрутку в остальные столбцы.Я искал помощи и увидел комментарий, в котором говорилось, что нужно поместить две таблицы в одну большую.Я покажу свой пример:
<html>
<head>
<meta charset="utf-8"/>
<title>How can I do a Scroll in a specific part of my screen?</title>
</head>
<body>
<div id="maindiv">
<table id="maintable">
<tbody>
<tr>
<th id="colfixed">
<table id="fixedtable">
<tbody>
<tr>
<th> Name </th>
</tr>
<tr>
<td> Person 1 </td>
</tr>
<tr>
<td> Person 2 </td>
</tr>
<tr>
<td> Person 3 </td>
</tr>
</tbody>
</table>
</th>
<th id="colscroll">
<table id="scrolltable">
<tbody>
<tr>
<th> Day 1 </th>
<th> Day 2 </th>
<th> Day 3 </th>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</div>
</body>
<html>
Дело в том, что я хотел бы, чтобы имена людей всегда были видны, и боковая прокрутка для столбцов дней (в этом примере показано 3 дня, но я будувероятно, есть более 100 дней).В основном это все.Если вы, ребята, знаете какую-то лучшую структуру HTML для этого или если есть какое-то свойство CSS, которое может это сделать, я буду очень рад узнать!
(я пытался использовать некоторые overflow: scroll и border-collapse: collapse, но это не сработало, как я ожидал).