I am having trouble getting the header column to stick to the top along with the first column beneath it. Here's what I'm aiming for:
https://i.stack.imgur.com/hzVt8.png
Despite my efforts, I can't seem to make it work. I've experimented with various methods, and since I'm new to CSS, it's been a bit challenging trying to align the static top header with the table content on a mobile view.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="root">
<div>
<table border="1">
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head6</th>
<th>head7</th>
<th>head8</th>
<th>head9</th>
<th>head10</th>
<th>head11</th>
<th>head12</th>
<th>head13</th>
</thead>
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<!-- More rows here -->
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
table tbody, table thead {
display: block;
}
table thead {
width: 600px;
}
table tbody {
overflow: auto;
height: 100px;
width: 600px;
}
EDIT: Corrected "column" to "row." My mistake!
EDIT 2: Added picture for clarity https://i.stack.imgur.com/iqfXT.png