I made a simple table with an overflow-x:auto;
feature:
table {
border-collapse: collapse;
width: 150%;
}
td,
th {
border: 1px solid #AAA;
text-align: center;
padding: 3px;
}
<div style="overflow-x:auto;">
<table>
<thead>
<tr>
<th>d</th>
<th>c</th>
<th>b</th>
<th>a</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
How can I use the direction: rtl;
element to make it scroll from right to left when the screen is small?