15
Replies
Sorry but Tables are NOT responsive.
By @Nancy OShea
well, without wanting to enter into a polemic, it all depends on the point of view, or on what we mean by putting NOT in capital letters... here in France, it gives a categorical NO... so it means TABLE are not at all responive...
however, on closer inspection, TABLE can be somehow responsive, it all depend on our abilities using CSS, and having common sense on presenting datas
https://css-tricks.com/responsive-data-tables
May I point out that it was the OP who used the term first.
"...tucked within a responsive table..."
Table rows do not break to another row when content exceeds available space. And so-called responsive tables are a last resort as they rely on coding hacks to truncate content or reveal scrollbars, neither of which are ideal.
This works with all devices:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.grid_container {
display: grid;
grid-column-start: col 0;
grid-gap: 1.5%;
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}
.grid_container img {
vertical-align: baseline;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="grid_container">
<img src="https://dummyimage.com/216x159>" alt="placeholder">
<img src="https://dummyimage.com/216x159>" alt="placeholder">
<img src="https://dummyimage.com/216x159>" alt="placeholder">
</div>
</body>
</html>
May I point out that it was the OP who used the term first.
"...tucked within a responsive table..."
By @Nancy OShea
it doesn't matter who said what first... I was only posting about the fact that you had announced that the tables were NOT responsive... codepen's link demonstrates the opposite... but once again, I'm not trying to argue... let's just try to recognize a cat when we hear meow
You can call it whatever you wish (duck, cat, fish...) but that's not a responsive table.
It's an unsightly hack with negative margins, absolute positioning and hidden table headers among other less conventional contrivances like putting content into CSS (#%&!???). Egads, what will they think of next?
This hot mess can be avoided entirely by not using tables in the first place. One certainly doesn't need a table for 3 images.
At least you left one image without embedded style rules:
Edit: The first time that I came across something similar was when I used Dreamweaver extensions from Webassist. They used the image tag to prove legitimate useage of the extensions. Later on I realised that image tags within an email were used to track the email. Interesting concept.
AdChoices