W3C home > Mailing lists > Public > www-style@w3.org > July 2014

Re: regarding table-row styling (feature request)

From: Patrick Dark <www-style.at.w3.org@patrick.dark.name>
Date: Tue, 01 Jul 2014 23:35:40 -0500
Message-ID: <53B38C1C.9060304@patrick.dark.name>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC