Table contents change depending on window size - html

Question

I've got a simple table
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Photo</td>
</tr>
</thead>
</tbody>
<tr>
<td>John Doe</td>
<td>Eighteen</td>
<td>Img</td>
</tr>
<tr>
<td>Peter Stevens</td>
<td>Twenty</td>
<td>Img</td>
</tr>
<tr>
<td>Elizabeth Olsen</td>
<td>Twenty Six</td>
<td>Img</td>
</tr>
</tbody>
</table>
I'd like to hide the photos column if, say, width of the window is less than 1000 px. And I'd like the Age to show as a number ("Eighteen" -> "18") if the width is less than 800 px.
How do I do that? (preferably with HTML + CSS only)

Answer 1

I'd like to hide the photos column if, say, width of the window is less than 1000px.
Use a CSS Media query to check the screen size and hide it if the screen width is less than 1000px.
<td class="photo">Img</td>
#media (max-width:1000px) {
.photo {
display: none
}
}
And I'd like the Age to show as a number ("Eighteen" -> "18") if the width is less than 800px.
This also uses a media query, but it requires a CSS Pseudo Element and an HTML Custom Data Attribute as well.
<td class="age" data-age="18">Eighteen</td>
#media(max-width:800px) {
.age {
font-size: 0;
}
.age:before {
content: attr(data-age);
font-size: 12pt; /* Set this to your desired font size */
}
}
Full Demo:
#media(max-width:1000px) {
.photo {
display: none
}
}
#media(max-width:800px) {
.age {
font-size: 0;
}
.age:before {
content: attr(data-age);
font-size: 12pt; /* Set this to your desired font size */
}
}
<table>
<thead>
<tr>
<td>Name</td>
<td class="age" data-age="?">Age</td>
<td class="photo">Photo</td>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td class="age" data-age="18">Eighteen</td>
<td class="photo">Img</td>
</tr>
<tr>
<td>Peter Stevens</td>
<td class="age" data-age="20">Twenty</td>
<td class="photo">Img</td>
</tr>
<tr>
<td>Elizabeth Olsen</td>
<td class="age" data-age="26">Twenty Six</td>
<td class="photo">Img</td>
</tr>
</tbody>
</table>

Answer 2

To hide photos column in window width < 1000px
simply apply media query like that:
#media(max-width : 1000px) {
td:nth-child(3) {
display:none;
}
}
To display age as number in window width < 800px
you'll need to add the age in numbers somewhere in HTML, so the table row may look like that
<tr>
<td>John Doe</td>
<td>
<span class="age-in-text">Eighteen</span>
<span class="age-in-numbers">18</span>
</td>
<td>Img</td>
</tr>
then you set your style / media query simply like:
.age-in-numbers {
display:none;
}
.age-in-text {
display:block;
}
#media(max-width : 800px) {
.age-in-numbers {
display:block;
}
.age-in-text {
display:none;
}
}

Answer 3

You can use a #media query to write CSS that only applies to screens of certain sizes.
Hiding the column is quite easy. You can just hide the nth-child. td:nth-child(3) matches each third cell.
Hiding the text is a bit harder. CSS cannot transform written text to numbers like that, but in your server side script (PHP?) you may be able to add those numbers already. Now, you could add an extra column with the numeric age, and hide one when you show the other, but personally I think it's a neat trick to add the age as an attribute, and use CSS to display the numeric age instead of the textual content.
Use can use attr() to get the attribute of an element. In the snippet below, I 'hide' the textual content by making the font size 0. Then, I show the data-age attribute in the ::before pseudo element.
The advantage of this method is that it requires no significant changes to the HTML. Semantically it's still just a simple table.
#media (max-width: 800px) {
/* Hide the third column */
td:nth-child(3) {
display: none;
}
/* Hide the text in the second column by setting the font-size to 0 */
td:nth-child(2) {
font-size: 0;
}
/* Show the numeric value from the attribute instead. */
td:nth-child(2)::before {
font-size: 17px;
content: attr(data-age);
}
}
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Photo</td>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td data-age="18">Eighteen</td>
<td>Img</td>
</tr>
<tr>
<td>Peter Stevens</td>
<td data-age="20">Twenty</td>
<td>Img</td>
</tr>
<tr>
<td>Elizabeth Olsen</td>
<td data-age="26">Twenty Six</td>
<td>Img</td>
</tr>
</tbody>
</table>