Is there a way to prevent the border from disappearing when scrolling? How can I achieve that or start the scroll only from the scrolled part?
https://i.sstatic.net/YOsyo.gif
Exploring HTML Table Structures
<div class="wrapper">
<table>
<thead>
<th class='fix'>Fixed</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th class='fix'>Fixed</th>
</thead>
<tbody>
<tr>
<td class='fix'>First Content</td>
<td>A1</td>
<td>A2 (with longer content)</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td class='fix'>Last Content</td>
</tr>
</tbody>
</table>
</div>
Optimizing CSS for Tables
.wrapper {
overflow-x:scroll;
width:100%;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
background: white;
}
thead {
font-family: arial
}
tr {
border-bottom: 1px solid #ccc;
}
td, th {
vertical-align: top;
text-align: left;
width:100px;
padding: 5px;
border: 1px solid red;
}
.fix {
position:sticky;
background: white;
}
.fix:first-child {
left:0;
width:120px;
}
.fix:last-child {
right:0;
width:120px;
}
Try it out on JSBin: https://jsbin.com/marezen/1/edit?html,css,output