Re: regarding table-row styling (feature request)

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