Is there a way to set a minimum width for headers in a table and provide a scroll option if the total width exceeds 100% of the table width? Additionally, how can we ensure that the width of the header and td elements are equal?
Below is the HTML code: https://jsfiddle.net/1w7vnLec/
<html>
<head>
<style>
table.scroll {
width: 100%;
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: scroll;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
</style>
</head>
<body>
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 6</th>
<th>Head 7</th>
<th>Head 8</th>
<th>Head 9</th>
<th>Head 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 1</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</body>
</html>
How can we implement a fixed header with scrolling capability, and adjust the widths of headers and td elements equally?