EN
HTML - add horizontal scroll to table
7
points
In this short article, we would like to show how to add a horizontal scroll bar to the table using CSS.
The solution wraps table element with div element using that has added overflow-x style.
Quick solution:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<div style="overflow-x: scroll; width: 400px;">
<table style="width: 600px;">
<thead>
<tr>
<th>Problem</th>
<th>JavaScript</th>
<th>Java</th>
<th>Python</th>
<th>PHP</th>
</tr>
</thead>
<tbody>
<tr>
<td>some problem title 1</td>
<td>todo</td>
<td>todo</td>
<td>todo</td>
<td>todo</td>
</tr>
<tr>
<td>some problem title 2</td>
<td>todo</td>
<td>todo</td>
<td>todo</td>
<td>todo</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>