Change table column header and table cell element position #media in CSS - css

Question

I need to make a table responsive using CSS. When the screen size is small I must make the table headers and table cell data appear side by side. How can I do that using only CSS?
<table class="hobbies_table">
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies">Hobby1</th>
<th class="hobbies">Hobby2</th>
<th>Contact</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football</td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading</td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling</td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
.hobbies {
width: 50%;
display: flex;
}
.hobbies_values {
width: 50%;
display: flex;
}
#hobbies_table td:nth-of-type(3):before { content: attr(hobbies) }
#hobbies_table td:nth-last-of-type(2):before { content: attr(hobbies) }
I know only basic CSS. So this is what I have tried. But I came to know this is the wrong way. So how can I correct the code?
Here in #media, I want the hobbies and hobbies_values to be displayed like this:
Hobby1: Football
Hobby2: Snooker
Hobby1: Reading
Hobby2: Swimming
Hobby1: Travelling
Hobby2: Singing

Answer 1

May it helps :)
.hobbies_table {
width: 100%;
}
th {
display: flex;
}
tr {
width: 20%;
display: inline-grid;
}
<table class="hobbies_table">
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies">Hobby1</th>
<th class="hobbies">Hobby2</th>
<th>Contact</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football</td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading</td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling</td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>

Answer 2

There are two popular approaches to your problem:
Solution A (Bootstrap's classic "table responsiveness")
Simply wrap the table inside a scrollable div and allow it to have its full width. Note this becomes confusing on mobile devices, especially when the user starts scrolling in both directions. A better mobile user experience is often times opening the table in a modal and allowing the user to scroll it in full screen).
Solution B (Separate markup for each case)
Have separate markup for each case, hiding the unwanted contents using #media queries. The base principle is that you duplicate content and hide the clone you don't want displayed on each responsiveness interval.
As with almost anything, no solution is clearly better than the other. It largely varies from case to case.
Here's a solution catered for your particular case (based on clarifications in comments):
.mobile_content {
display: none;
}
#media (max-width: 700px) {
.desktop_content {
display: none;
}
.mobile_content {
display: block;
}
.hobbies_values + .hobbies_values {
display: none;
}
}
<table class="hobbies_table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies_values">
<div class="desktop_content">Hobby1</div>
<div class="mobile_content">Hobbies</div>
</th>
<th class="hobbies_values">Hobby2</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football<div class="mobile_content">Snooker</div></td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading<div class="mobile_content">Swimming</div></td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling<div class="mobile_content">Singing</div></td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
It's actually a separate case of solution B (where, rather than completely replace the table markup - you reuse part of it and only duplicate the part that is displayed under other column's content).