Hi there codeispoetry,
this code will make the table(s) accommodate smaller devices…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#survey,
#survey-mobile1,
#survey-mobile2 {
border-collapse: collapse;
background-color: #f2f2f2;
}
#survey-mobile1,
#survey-mobile2 {
display: none;
}
#survey caption,
#survey-mobile1 caption {
padding: 0.25em;
border: 1px solid #000;
border-bottom: 0;
font-size: 1.5em;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
#survey th,
#survey-mobile1 th,
#survey-mobile2 th,
#survey td,
#survey-mobile1 td,
#survey-mobile2 td {
padding: 0.25em;
border: 1px solid #000;
}
#survey th,
#survey-mobile1 th,
#survey-mobile2 th {
text-transform: uppercase;
}
#survey thead th,
#survey-mobile1 thead th,
#survey-mobile2 thead th {
background-color: #fff;
}
#survey td,
#survey-mobile1 td,
#survey-mobile2 td {
text-align:center;
}
#survey tfoot th,
#survey-mobile1 tfoot th,
#survey-mobile2 tfoot th {
text-align: left;
}
#survey tfoot td,
#survey-mobile1 tfoot td,
#survey-mobile2 tfoot td {
background-color: #c6efce;
}
#survey tfoot td:nth-of-type(8),
#survey-mobile1 tfoot td:nth-of-type(8)
#survey tfoot td:nth-of-type(14),
#survey-mobile2 tfoot td:nth-of-type(6) {
background-color: #f2f2f2;
}
#survey-mobile1 tfoot td {
border-bottom: 0;
}
@media ( max-width: 45em ) {
#survey {
display: none;
}
#survey-mobile1,
#survey-mobile2 {
display: block;
}
}
@media ( max-width: 25em ) {
#survey-mobile1 th,
#survey-mobile1 td,
#survey-mobile2 th,
#survey-mobile2 td {
padding: 0;
}
}
@media ( max-width: 22em ) {
#survey-mobile1,
#survey-mobile2 {
font-size: 90%;
}
}
</style>
</head>
<body>
<table id="survey">
<caption>Quick Survey</caption>
<thead>
<tr>
<th scope="col" colspan="8">Desktop</th>
<th scope="col" colspan="9">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="17">Basic Support</th>
</tr><tr>
<td>1</td>
<td>12</td>
<td>3</td>
<td>6</td>
<td>1</td>
<td>2.3</td>
<td>6</td>
<td>?</td>
<td>2</td>
<td>5</td>
<td>8</td>
<td>9</td>
<td>11</td>
<td>?</td>
<td>2</td>
<td>3</td>
<td>7</td>
</tr>
</tfoot>
</table>
<table id="survey-mobile1">
<caption>Quick Survey</caption>
<thead>
<tr>
<th scope="col" colspan="8">Desktop</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="8">Basic Support</th>
</tr><tr>
<td>1</td>
<td>12</td>
<td>3</td>
<td>6</td>
<td>1</td>
<td>2.3</td>
<td>6</td>
<td>?</td>
</tr>
</tfoot>
</table>
<table id="survey-mobile2">
<thead>
<tr>
<th scope="col" colspan="9">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="9">Basic Support</th>
</tr><tr>
<td>2</td>
<td>5</td>
<td>8</td>
<td>9</td>
<td>11</td>
<td>?</td>
<td>2</td>
<td>3</td>
<td>7</td>
</tr>
</tfoot>
</table>
</body>
</html>
coothead
1 Like
Can you please check why mine is not yet showing as a table? what structural blunder I am commiting?
It looks OK to my eyes.
What, precisely, were you expecting ?
coothead
1 Like
Table like feel is not coming. Borders etc. The elements looks like as if they are orphan.
I am trying to make text vertical, but still it is not vertical → https://codepen.io/codeispoetry/pen/PXaBoz
May be in td I have to use span or something else.
The text rotation css implementation is hairy. You need to set a height to the cell to get it to place correctly.
You’ll also want to set the border on the cells, not just the table, and set the border-collapse property to keep the cells together.
td {transform: rotate(-90deg); height: 10em; white-space: nowrap;}
table { border-collapse: collapse;}
th, td { border: 1px solid #EEEEEE;}
Don’t do it .
Tables are for displaying data, not playing silly buggers.
coothead
Erik_J
January 8, 2019, 2:07pm
28
At the page bottom there is a “Browser Compatibility” table, is that what you were trying to achieve?
Their Table-table:
1 Like
Yes.
But I see this image in the chrome →
PaulOB
January 8, 2019, 7:25pm
30
What’s wrong with that image?
1 Like
Erik_J
January 8, 2019, 9:02pm
31
It should work without, but I think a span could make it easier to position the vertical text.
You could apply writing-mode instead of transform to achieve vertical text.
Applied to (edited tbody) @coothead ’s first example:
.v<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style>
body {
background-color: #f9f9f9;
font: 100% / 162% helvetica, arial, sans-serif;
}
#survey {
border-collapse: collapse;
background-color: #f2f2f2;
}
#survey caption {
padding: 0.25em;
border: 1px solid #000;
border-bottom: 0;
font-size: 1.5em;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
#survey th, #survey td {
padding: 0.25em;
border: 1px solid #000;
}
#survey th {
text-transform: uppercase;
}
#survey thead th {
b ackground-color: #fff;
}
.vertical td {
vertical-align:bottom;
}
.vertical span {
writing-mode: sideways-lr; /* vertical and upwards */
line-height:0; /* centers the line (by td text-align) */
white-space: nowrap; /* for safety as line-height:0 */
}
#survey td {
text-align:center;
}
#survey tfoot th {
text-align: center;
}
#survey tfoot td {
background-color: #c6efce;
}
#survey tfoot td:nth-of-type(8),
#survey tfoot td:nth-of-type(14) {
background-color: #f2f2f2;
}
</style>
</head><body>
<table id="survey">
<caption>Quick Survey</caption>
<thead>
<tr>
<th scope="col" colspan="8">Desktop</th>
<th scope="col" colspan="9">Mobile</th>
</tr>
</thead>
<tbody>
<tr class="vertical">
<td><span>SOME TEXT</span></td>
<td><span>SOME MORE TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
<td><span>SOME TEXT</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="17">Basic Support</th>
</tr>
<tr>
<td>1</td>
<td>12</td>
<td>3</td>
<td>6</td>
<td>1</td>
<td>2.3</td>
<td>6</td>
<td>?</td>
<td>2</td>
<td>5</td>
<td>8</td>
<td>9</td>
<td>11</td>
<td>?</td>
<td>2</td>
<td>3</td>
<td>7</td>
</tr>
</tfoot>
</table>
</body>
</html>
2 Likes
PaulOB
January 8, 2019, 10:08pm
32
That’s only working in Firefox I believe.
If you use vertical-lr you get modern browser support (Edge, Firefox, Chrome and Safari). Of course that makes the text read from top to bottom so you could use a transform to flip it without affecting anything else.
This is just proof of concept but I’d do something like this.
(Note that’s just a mock up and should use thead, tbody,th and tfoot etc as per usual)
Needs testing of course
2 Likes
Hi there Paul,
I found that it did not work with Firefox , which, for somedisplay: table .
It likes display: block , though.
https://codepen.io/anon/pen/KbBgKr
coothead
2 Likes
PaulOB
January 8, 2019, 10:38pm
34
coothead:
Hi there Paul,
I found that it did not work with Firefox , which, for somedisplay: table .
Cheers I’ll have have to do more testing
I used display table because I was thinking of using margin auto to center the cells if the cells below were wider but that caused an issue in Safari.
As usual not enough time spent testing
1 Like
Erik_J
January 9, 2019, 12:21am
35
I used text-align:center to do that.
I decided to remove Firefox from my system when the ESR was forced to upgrade to the web scheme, it’s not unique anymore and stats are in decline.
2 Likes
Hi there codeispoetry,
have a look at this example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #fcfcfc;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#survey,
#survey-mobile1,
#survey-mobile2 {
margin: auto;
border-collapse: collapse;
background-color: #f2f2f2;
}
#survey-mobile1,
#survey-mobile2 {
position: absolute;
left: -999em;
}
#survey-mobile2 {
margin-top: 0.5em;
}
#survey caption,
#survey-mobile1 caption {
padding: 0.25em;
border: 1px solid #000;
border-bottom: 0;
font-size: 1.5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
#survey th,
#survey-mobile1 th,
#survey-mobile2 th,
#survey td,
#survey-mobile1 td,
#survey-mobile2 td {
padding: 0.25em;
border: 1px solid #000;
}
#survey th,
#survey-mobile1 th,
#survey-mobile2 th {
text-transform: uppercase;
}
#survey thead th,
#survey-mobile1 thead th,
#survey-mobile2 thead th {
background-color: #fff;
}
#survey td,
#survey-mobile1 td,
#survey-mobile2 td {
text-align:center;
}
#survey tbody tr:first-of-type span,
#survey-mobile1 tbody tr:first-of-type span,
#survey-mobile2 tr:first-of-type span {
display: inline-block;
padding: 1em 0;
writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: rotate( 180deg );
white-space: nowrap;
}
#survey tfoot th,
#survey-mobile1 tfoot th,
#survey-mobile2 tfoot th {
text-align: left;
}
#survey tfoot td,
#survey-mobile1 tfoot td,
#survey-mobile2 tfoot td {
background-color: #c6efce;
}
#survey tfoot td:nth-of-type(6),
#survey-mobile1 tfoot td:nth-of-type(6),
#survey tfoot td:nth-of-type(12),
#survey-mobile2 tfoot td:nth-of-type(6) {
background-color: #f2f2f2;
}
@media ( max-width: 45em ) {
#survey {
display: none;
}
#survey-mobile1,
#survey-mobile2 {
position: static;
}
}
@media ( max-width: 22em ) {
#survey-mobile1,
#survey-mobile2 {
font-size: 95%;
}
}
</style>
</head>
<body>
<table id="survey">
<caption>Quick Survey</caption>
<thead>
<tr>
<th scope="col" colspan="6">Desktop</th>
<th scope="col" colspan="7">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Chrome</span></td>
<td><span>Edge</span></td>
<td><span>Firefox</span></td>
<td><span>Internet Explorer</span></td>
<td><span>Opera</span></td>
<td><span>Safari</span></td>
<td><span>Android Webview</span></td>
<td><span>Chrome for Android</span></td>
<td><span>Edge Mobile</span></td>
<td><span>Firefox for Android</span></td>
<td><span>Opera for Android</span></td>
<td><span>Safari on IOS</span></td>
<td><span>Samsung Internet</span></td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="13">Basic Support</th>
</tr><tr>
<td>1</td>
<td>12</td>
<td>3</td>
<td>6</td>
<td>1</td>
<td>?</td>
<td>2</td>
<td>5</td>
<td>8</td>
<td>9</td>
<td>11</td>
<td>?</td>
<td>2</td>
</tr>
</tfoot>
</table>
<table id="survey-mobile1">
<caption>Quick Survey</caption>
<thead>
<tr>
<th scope="col" colspan="6">Desktop</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Chrome</span></td>
<td><span>Edge</span></td>
<td><span>Firefox</span></td>
<td><span>Internet Explorer</span></td>
<td><span>Opera</span></td>
<td><span>Safari</span></td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="6">Basic Support</th>
</tr><tr>
<td>1</td>
<td>12</td>
<td>3</td>
<td>6</td>
<td>1</td>
<td>?</td>
</tr>
</tfoot>
</table>
<table id="survey-mobile2">
<thead>
<tr>
<th scope="col" colspan="7">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Android Webview</span></td>
<td><span>Chrome for Android</span></td>
<td><span>Edge Mobile</span></td>
<td><span>Firefox for Android</span></td>
<td><span>Opera for Android</span></td>
<td><span>Safari on IOS</span></td>
<td><span>Samsung Internet</span></td>
</tr><tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="col" colspan="7">Basic Support</th>
</tr><tr>
<td>2</td>
<td>5</td>
<td>8</td>
<td>9</td>
<td>11</td>
<td>?</td>
<td>2</td>
</tr>
</tfoot>
</table>
</body>
</html>
…it even works in IE11.
4 Likes
Erik_J
January 9, 2019, 12:16pm
37
Sorry for mixing up the writing-mode property in my suggestion.
I think Mozilla-Dev could rather use this and avoid the height setting they use to grow the cell height in order to fit the rotated text.
With text-align: center; on the cell and line-height: 0; on the inline span, the vertical text will center horizontally no matter the cell width.
3 Likes
Nothing sir. It was slightly different from then what was posted by another poster.
PaulOB
January 9, 2019, 4:51pm
39
Ok, they are the same table but just with more data showing
I think you have enough information to code this now based on the comments above.
I updated my codepen with some suggestions from above just to show the basic format (this is not based on your exact requirements but rather to show the technique more simply).
Note that I thought it better not to use transform outside of the @supports rule because browsers that understand transform may not understand writing mode and you would get upside down horizontal text @coothead but I thought better off using transform to make it face the other way (as already mentioned) in case older browsers don’t do both).
My original demo was working in Firefox when I used display:table but it was the transform that caused it to go wrong and seems to be a bug in Firefox (again). I had various demos using inline-block on the span or display:block so other properties may also work. Indeed you don’t need to change the display of the span except for issues in Safari (the white-space nowrap seems to only be needed for Safari also).
I think the demos in this thread are pretty good now and show proof of concept and can be tweaked one way or another.
Good work everyone
PS I added an example to my demo of how I would handle smaller screen (less than 650px or mobile etc) but it does depend how wide the table will be or you could look at the method that coothead is using although I’m not keen duplicating html and admittedly my data-th attributes are indeed duplicating the header text which is how they work so there will always be a compromise.
3 Likes
Thank you so much. I think I will be able to code now what I want. I will give it a honest try. The responsive part is also looking very clean, simple and elegant.
1 Like
