{"id":34604,"date":"2017-12-03T03:02:48","date_gmt":"2017-12-02T17:02:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34604"},"modified":"2019-08-11T15:58:22","modified_gmt":"2019-08-11T05:58:22","slug":"css3-flexbox-table-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-flexbox-table-tutorial\/","title":{"rendered":"CSS3 Flexbox Table Tutorial"},"content":{"rendered":"
\"CSS3<\/a>

CSS3 Flexbox Table Tutorial<\/p><\/div>\n

If you were around for the recent CSS3 Flexbox Primer Tutorial<\/a> and the concept of CSS3’s …<\/p>\n


\ndisplay: flex<\/a>;
\nflex-direction: row; \/\/ default, or row-reverse or column or column-reverse
\n<\/code><\/p>\n

… and this was new to you regarding styling that can apply to a “parent” element of “children”, did you wonder as an almost immediate thought, as I had …<\/p>\n

\nWhat happens with this CSS3 flexbox styling within an HTML table, specifically if you try it on a table’s tr<\/i> (row) element?\n<\/p><\/blockquote>\n

Well, the answer is, you can “warp” a table, just for one or a few rows if you like, using this CSS3 flexbox styling. We found out by incorporating dynamic CSS3 flexbox styling possibilities into a web application (about the trajectory of drop punt in Australian Rules football) of the past that had a set number of table rows (with ID defined) in HTML and CSS and Javascript code you could try yourself at this live run<\/a> link (with its underlying dropcomparisonpunt.htm<\/a> changed in this way<\/a>). We did this via an added HTML select “dropdown” element as per …<\/p>\n


\n<select onchange=\" var trs, jtrs, itrs, its=['tr','h1'], wis=window.getComputedStyle(document.getElementsByTagName('table')[1], null).getPropertyValue('width'); if (wis.indexOf('px') == -1 || 1 == 1) { wis='100%'; } for (jtrs=0; jtrs<its.length; jtrs++) { trs=document.getElementsByTagName(its[jtrs]); for (itrs=0; itrs<trs.length; itrs++) { trs[itrs].style.width=wis; trs[itrs].style.display='flex'; trs[itrs].style.flexDirection=this.value; } wis='100%'; document.getElementById('oflex' + jtrs).innerHTML=document.getElementById('oflex' + jtrs).innerHTML.replace('t view','t flex view'); } \" id='sflex'><option value='row' id='oflex0'>Left to Right view<\/option><option value='row-reverse' id='oflex1'>Right to Left flex view<\/option><\/select>
\n<\/code><\/p>\n

… which as you may have surmised applies, optionally, and in a user controlled way, CSS3 flexbox styling (only the row* options, though) to both …<\/p>\n

    \n
  1. tr<\/i> table row elements … and …<\/li>\n
  2. h1<\/i> header element<\/li>\n<\/ol>\n

    … with interesting visual effects … we think?! Perhaps “you think” too?!<\/p>\n

    \n

    Previous relevant CSS3 Flexbox Primer Tutorial<\/a> is shown below.<\/p>\n

    \"CSS3<\/a>

    CSS3 Flexbox Primer Tutorial<\/p><\/div>\n

    Responsive design is an important aspect to modern web design, because of the realities of the online world’s push to mobile devices, with their smaller device widths. As the W3Schools<\/a> website says …<\/p>\n

    \nThe Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without having to use floats or positioning.\n<\/p><\/blockquote>\n

    … and, yes, using the display: flex<\/i> property is much more comprehensive a (CSS styling) concept than the float<\/i> usage options web designers often relied on for this time of styling pre-CSS3.<\/p>\n

    So, today, to try to show you a bit of how this new Flexbox Layout works, we write a proof of concept HTML and CSS and Javascript (source code file) you could call flextest.html<\/a> offering …<\/p>\n