Consider a table inside a div:
.tbl {
width: 20%;
max-height: 100px;
overflow: auto;
}
.tbl table {
width: 100%;
border-collapse: collapse;
}
table th {
background-color: gray;
}
table td {
background-color: aqua;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}<div class="tbl">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</thead>
<tbody>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="tbl">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</thead>
<tbody>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
</tbody>
</table>
</div>I have noticed that the scrollbar is counted as part of the table width: When deleting some rows, such that the scrollbar disappears, the table becomes wider by the amount of the scrollbar-width. For an example, execute the above code: The table below is as wide as the table above including its scrollbar.
Is there a way to style the table such that the scrollbar is added to the table width and not subtracted from it?
Imagine that you are filtering your table. Without applying the filter, you have a scrollbar, but when applying the filter, the scrollbar disappears. I really wouldn't want the table width to change in this scenario.
