I have been working on making a table mobile responsive, and I am striving to replicate a specific design. The image linked here shows the goal I am aiming for: https://i.sstatic.net/1xFLf.png
So far, this is what I have managed to achieve: https://i.sstatic.net/6mZIs.png
My current implementation involves using the after pseudo-selector to add horizontal lines to the table. However, only the first five tables from the mockup are showing up. I have set the display property of the other elements to none, but the horizontal line appears for everything.
To see what I mean, take a look at this image: https://i.sstatic.net/QZUc3.png
I am wondering if there is a way to disable the horizontal line for the last element so that only the first five elements appear without it.
@media (max-width: 500px) {
body {
overflow-x: hidden;
margin: 0;
}
.date-container {
width: 260px;
height: 40px;
...
<div class="email-table">
<table>
<tr>
<th>From <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
<th>To</th>
<th>Subject</th>
<th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
...