- From: Patrick Dark <www-style.at.w3.org@patrick.dark.name>
- Date: Tue, 01 Jul 2014 23:35:40 -0500
- To: Rafał Pietrak <rafal@ztk-rp.eu>, Rafał Pietrak <rafal@ztk-rp.eu>
- CC: www-style@w3.org
On 6/28/2014 8:52 AM, Rafał Pietrak wrote:
> A little more elaborated example is the following:
> 1. the table in the example comes from:
> http://www.engineeringtoolbox.com/chemical-resistance-rubbers-elastomers-d_1425.html
> 2. I've copied it into the jsfiddle, as: http://jsfiddle.net/fexp/9abQ7/
> 3. and then tried to "tile-it-up" for mobile device as:
> http://jsfiddle.net/fexp/9abQ7/4/
>
> But I wasn't able to turn (2) into (3) (or the other way around) only
> by styling html tags. Changeing of tags into/from TABLE/DIV was
> required .... if I haven't missed something here.
>
> And this is the "first target" of my "feature request".
What you're asking for can be accomplished with existing features.
I rewrote your style sheet at http://jsfiddle.net/fexp/9abQ7/ into the
code at http://jsfiddle.net/9abQ7/21/ to demonstrate. The CSS used at
the latter link is as follows:
* { margin: 0; padding: 0; }
thead { display: none; }
tr, td { display: block; }
tr { margin: 0.25rem; border: 1px solid black; padding: 0.25rem; color:
black; }
tr:nth-child(odd) { background-color: silver; }
td:first-child { font-weight: bolder; }
td:nth-child(2) { font-style: italic; text-align: end; }
td:nth-child(n + 3) ul { margin: 1rem 0; padding: 0 2.5rem; }
li { display: inline; }
li:not(:last-child)::after { content: ","; }
It's also worth noting that your HTML markup is incorrect; each row
should begin with a th element, not a td element.
-- Patrick
---
This email is free from viruses and malware because avast! Antivirus protection is active.
http://www.avast.com
Received on Wednesday, 2 July 2014 12:27:34 UTC