I am making a table where I want the first and last column to be sticky. This part I have already taken care of (I made the container resizable that way you can get the scrollbar to see it.)
My problem is that I want the sticky columns to have a border-right and border-left respectively. When the table is not scrolled yet, you can see that the borders are working exactly how I want it to look. However, you when start scrolling the border disappear for an unexplainable reason. When I turn border-collapse: collapse off for the table this bug goes away, however, I need border-collapse: collapse for the rest of the table design to be correct. Therefore, I wonder, is there a way I can make specific borders inside a table escape the tables border collapsing behaviour which seems to be messing it up? Please help me fix this issue.
I have tried replacing the border with a box shadow, however, the exact same issue is happening still.
I have also tried using ::before and ::after pseudo-elements, however, if you comment that solution back in from my snippet, you will see that it is not working and I can’t get the borders to line up correctly.
body {
display: flex;
align-items: center;
justify-content: center;
}
section {
background-color: white;
border-radius: 1rem;
padding: 1rem;
margin: 0 auto;
overflow: hidden;
resize: horizontal;
}
button {
cursor: pointer;
padding: 0.25rem 0.5rem;
}
.wl-table-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
.wl-table {
--wlt-background: white;
--wlt-column-gap: 3rem;
--wlt-border-width: 0.0625rem;
--wlt-border-style: solid;
--wlt-border-color: #ccc;
--wlt-border: var(--wlt-border-width) var(--wlt-border-style) var(--wlt-border-color);
font-size: 0.875rem;
border-collapse: collapse;
width: 100%;
}
.wl-table th,
.wl-table td {
padding-block: 0.5rem;
border-bottom: var(--wlt-border);
white-space: nowrap;
text-align: left;
}
.wl-table th+th,
.wl-table td+td {
padding-left: var(--wlt-column-gap);
}
.wl-table th[data-type="stretch"],
.wl-table td[data-type="stretch"] {
width: 100%;
}
.wl-table th[data-type="sticky-start"],
.wl-table td[data-type="sticky-start"] {
position: sticky;
left: 0;
z-index: 1;
background: var(--wlt-background);
padding-right: 1rem;
border-right: var(--wlt-border);
}
/*.wl-table th[data-type="sticky-start"]::after,
.wl-table td[data-type="sticky-start"]::after {
content: "";
position: absolute;
top: 0;
right: calc(0 - var(--wlt-border-width) + 1rem);
bottom: 0;
width: var(--wlt-border-width);
background: var(--wlt-border-color);
z-index: 1;
}*/
.wl-table th[data-type="sticky-end"],
.wl-table td[data-type="sticky-end"] {
position: sticky;
right: 0;
z-index: 1;
background: var(--wlt-background);
padding-left: 1rem;
border-left: var(--wlt-border);
}
/*.wl-table th[data-type="sticky-end"]::after,
.wl-table td[data-type="sticky-end"]::after {
content: "";
position: absolute;
top: 0;
left: calc(0 - var(--wlt-border-width) - 1rem);
bottom: 0;
width: var(--wlt-border-width);
background: var(--wlt-border-color);
z-index: 1;
}*/<section>
<div class="wl-table-container">
<table class="wl-table">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Total</th>
<th scope="col">Date</th>
<th scope="col" data-type="stretch">Customer</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr tabindex="0">
<td data-type="sticky-start">#100000000023</td>
<td>$199.99</td>
<td>12:38 - 21. Jan. 2024</td>
<td data-type="stretch">Peter Pan</td>
<td data-type="sticky-end"><button>:</button></td>
</tr>
<tr tabindex="0">
<td data-type="sticky-start">#100000000024</td>
<td>$199.99</td>
<td>12:38 - 21. Jan. 2024</td>
<td data-type="stretch">Peter Griffin</td>
<td data-type="sticky-end"><button>:</button></td>
</tr>
<tr tabindex="0">
<td data-type="sticky-start">#100000000025</td>
<td>$199.99</td>
<td>12:38 - 21. Jan. 2024</td>
<td data-type="stretch">Peter Bealish</td>
<td data-type="sticky-end"><button>:</button></td>
</tr>
<tr tabindex="0">
<td data-type="sticky-start">#100000000026</td>
<td>$199.99</td>
<td>12:38 - 21. Jan. 2024</td>
<td data-type="stretch">Peter Parker</td>
<td data-type="sticky-end"><button>:</button></td>
</tr>
</tbody>
</table>
</div>
</section>
2
Answers
Try this:
This issue is caused by the border-collapse: collapse property, which merges adjacent borders into a single border. To solve this issue, use the outline property instead of border. The outline property is not affected by border-collapse.