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:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
table {7
border-collapse: collapse; 8
}9
10
table, td, th {11
border: 1px solid black;12
}13
14
</style>15
</head>16
<body>17
18
<div style="overflow-x: scroll; width: 400px;">19
<table style="width: 600px;">20
<thead>21
<tr>22
<th>Problem</th>23
<th>JavaScript</th>24
<th>Java</th>25
<th>Python</th>26
<th>PHP</th>27
</tr>28
</thead>29
<tbody>30
<tr>31
<td>some problem title 1</td>32
<td>todo</td>33
<td>todo</td>34
<td>todo</td>35
<td>todo</td>36
</tr>37
<tr>38
<td>some problem title 2</td>39
<td>todo</td>40
<td>todo</td>41
<td>todo</td>42
<td>todo</td>43
</tr>44
</tbody>45
</table>46
</div>47
48
</body>49
</html>