How can I make a Table mobile responsive - html

Question

I am trying to make a table mobile responsive. The first thing I would love to do is to decrease the width size of the table headings and then enable the table data to have one complete row for each data.
I am trying to get my table to look like the attached picture on mobile.
.email-table table{
margin-left: 40px;
font-family: 'Roboto', sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td{
font-size: 1.2rem;
}
td:last-of-type{
font-weight: 700;
}
.attachment{
display: flex;
justify-content: center;
width: 20%;
align-items: center;
}
.first-clip span:last-of-type{
margin-right: 20px;
}
.last-clip{
margin-left: 25px;
}
.attachment span:last-of-type{
flex-shrink: 0;
}
.attachment span:first-of-type img{
width: 20px;
height: 20px;
}
.text-attachment{
display: flex;
justify-content: space-around;
}
.text-attachment span:first-of-type{
transform: translateX(-18px);
}
.second-text{
transform: translateX(5px);
}
.text-attachment span:last-of-type{
border: 1px solid #ccc;
background-color: #5E5D5D;
color: white;
border-radius: 5px;
padding: 0px 5px;
}
.second-text span:last-of-type{
transform: translateX(-10px);
}
td img{
width: 20px;
height: 20px;
transform: translateX(-30px);
}
th{
background-color: #EEEDED;
border-top: 3px solid #dddddd;
border-bottom: 3px solid #dddddd;
}
th:not(:last-child){
color: #5E5D5D;
}
.date>span img{
height: 10px;
width: 10px;
padding-left: 3px;
}
tr:not(:first-of-type):hover{
cursor: pointer;
color: blue;
background-color: #EEEDED;
}
<div class="email-table">
<table>
<tr>
<th>From</th>
<th>To</th>
<th>Subject</th>
<th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
</tr>
<tr>
<td>aaa#example.com</td>
<td>zzz.zzz#example.com</td>
<td>[ HR-888 ] Notice of official announcement</td>
<td>0:20</td>
</tr>
<tr>
<td>bbb.bbbb#exam... </td>
<td>yyy#example.com</td>
<td>[web:333] "Web Contact"</td>
<td>0:10</td>
</tr>
<tr>
<td>ccc#example.com </td>
<td>
<div class="text-attachment">
<span>xxx#example.com, ...</span>
<span>+1</span>
</div>
</td>
<td>Happy New Year! Greetings for the New Year.</td>
<td>
<div class="attachment first-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>0:00</span>
</div>
</td>
</tr>
<tr>
<td>ddd.dddd#exam...</td>
<td>
<div class="text-attachment second-text">
<span>vvv.vvv#example.com, ... </span>
<span>+1</span>
</div>
</td>
<td>[HR-887(Revised: Office Expansion Project Team)] Notice of off... </td>
<td>Jan 01 </td>
</tr>
<tr>
<td>eee#example.com</td>
<td>
<div class="text-attachment">
<span>sss#example.com, .... </span>
<span>+2</span>
</div>
</td>
<td>[Github] Logout page</td>
<td>Jan 01</td>
</tr>
<tr>
<td>fff.ffff#example.c... </td>
<td>qqq.qqq#example.com</td>
<td>［dev］ Postfix 3.1.12 / 3.2.9 / 3.3.4 / 3.4.5</td>
<td>Jan 01</td>
</tr>
<tr>
<td>ggg#example.com </td>
<td>ppp#example.com</td>
<td>Re: [Github] Brush-up on loading animation </td>
<td>Jan 01</td>
</tr>
<tr>
<td>hhh.hhh#examp...</td>
<td>ooo.ooo#example.com</td>
<td>Workplace Summary for sample, Inc.: Jun 2 - Jun 9</td>
<td>
<div class="attachment">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>Jan 01</span>
</div>
</td>
</tr>
<tr>
<td>iii#example.com</td>
<td>nnn#example.com</td>
<td>I love you</td>
<td>
<div class="attachment last-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>2019/12/31</span>
</div>
</td>
</tr>
<tr>
<td>Pablo-Diego-...</td>
<td>Pablo-Diego-José-Francisc...
</td>
<td>[info:888] ABC EQUIPMENT COMPANY</td>
<td>2019/12/31</td>
</tr>
</table>
</div>
I, first of all, tried to make the header much smaller but that does not even work. I am totally lost at the steps I need to take to make this look good on mobile.

Answer 1

The trick for this sort of layout is to throw away the default table styling entirely.
Use display: contents to stop the tbody element from generating a box. Then use display: flex on the table to make it lay out the tr elements in a non-tabular column.
Then each tr can be styled as a CSS Grid, and the various elements positioned on that.
#media screen and (max-width: 1000px) {
body {
background: #AAA
}
table {
display: flex;
flex-direction: column;
margin: 0 10%;
background: white;
}
tbody,
tfoot {
display: contents;
}
thead {
display: none;
}
tr {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 1px 1px;
grid-template-areas: "From Date" "To Date" "Subject Date";
border-bottom: solid #aaa 1px;
}
td {
padding: 3px;
}
td:nth-child(1) {
grid-area: From;
}
td:nth-child(2) {
grid-area: To;
}
td:nth-child(3) {
grid-area: Subject;
}
td:nth-child(4) {
grid-area: Date;
text-align: right;
}
}
<div class="email-table">
<table>
<thead>
<tr>
<th>From</th>
<th>To</th>
<th>Subject</th>
<th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
</tr>
</thead>
<tr>
<td>aaa#example.com</td>
<td>zzz.zzz#example.com</td>
<td>[ HR-888 ] Notice of official announcement</td>
<td>0:20</td>
</tr>
<tr>
<td>bbb.bbbb#exam... </td>
<td>yyy#example.com</td>
<td>[web:333] "Web Contact"</td>
<td>0:10</td>
</tr>
<tr>
<td>ccc#example.com </td>
<td>
<div class="text-attachment">
<span>xxx#example.com, ...</span>
<span>+1</span>
</div>
</td>
<td>Happy New Year! Greetings for the New Year.</td>
<td>
<div class="attachment first-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>0:00</span>
</div>
</td>
</tr>
<tr>
<td>ddd.dddd#exam...</td>
<td>
<div class="text-attachment second-text">
<span>vvv.vvv#example.com, ... </span>
<span>+1</span>
</div>
</td>
<td>[HR-887(Revised: Office Expansion Project Team)] Notice of off... </td>
<td>Jan 01 </td>
</tr>
<tr>
<td>eee#example.com</td>
<td>
<div class="text-attachment">
<span>sss#example.com, .... </span>
<span>+2</span>
</div>
</td>
<td>[Github] Logout page</td>
<td>Jan 01</td>
</tr>
<tr>
<td>fff.ffff#example.c... </td>
<td>qqq.qqq#example.com</td>
<td>［dev］ Postfix 3.1.12 / 3.2.9 / 3.3.4 / 3.4.5</td>
<td>Jan 01</td>
</tr>
<tr>
<td>ggg#example.com </td>
<td>ppp#example.com</td>
<td>Re: [Github] Brush-up on loading animation </td>
<td>Jan 01</td>
</tr>
<tr>
<td>hhh.hhh#examp...</td>
<td>ooo.ooo#example.com</td>
<td>Workplace Summary for sample, Inc.: Jun 2 - Jun 9</td>
<td>
<div class="attachment">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>Jan 01</span>
</div>
</td>
</tr>
<tr>
<td>iii#example.com</td>
<td>nnn#example.com</td>
<td>I love you</td>
<td>
<div class="attachment last-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>2019/12/31</span>
</div>
</td>
</tr>
<tr>
<td>Pablo-Diego-...</td>
<td>Pablo-Diego-José-Francisc...
</td>
<td>[info:888] ABC EQUIPMENT COMPANY</td>
<td>2019/12/31</td>
</tr>
</table>
</div>