fixed column tables are getting border issue with horizontal scrolling - html

Question

The border disappears when scrolling. I want the border to appear. How can I do this? Or how can I start the scroll only from the scrolled part?
HTML - Table Structure
<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>
CSS - Table CSS
.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;
}
Play with code: https://jsbin.com/marezen/1/edit?html,css,output

Answer 1

In order to have fixed table borders you need to:
remove border-collapse from css
table {
table-layout: fixed;
width: 100%;
/*border-collapse: collapse;*/
background: white;
}
Also add cellspacing="0" to remove the cellspacing
<table cellspacing="0">
for having same borders like your example, combined with my solution:
CSS-
.wrapper {
overflow-x:scroll;
width:100%;
}
table {
table-layout: fixed;
width: 100%;
/* border-collapse: collapse; */
background: white;
border-top:1px solid red;
/* border-left:1px solid red; */
}
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; */
border-right:1px solid red;
border-bottom:1px solid red;
}
.fix {
position:sticky;
background: white;
border-left:1px solid red;
}
.fix:first-child {
left:0;
width:120px;
}
.fix:last-child {
right:0;
width:120px;
}
td:nth-child(6),
th:nth-child(6){
border-right:none;
}
HTML-
<div class="wrapper">
<table cellspacing="0">
<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>
<tr>
<td class='fix'>First Content (with longer content)</td>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td class='fix'>Last Content</td>
</tr>
<tr>
<td class='fix'>First Content</td>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td class='fix'>Last Content (with longer content)</td>
</tr>
</tbody>
</table>
</div>

Answer 2

The solution is to add border-left to the wrapper. Then I removed the border property from td, tr and instead added border selection to them like border-top in order to remove the wrapper's border overlapping those borders.
https://jsbin.com/niluyefacu/edit?html,css,output