Issue
My goal is to build a table using CSS (display:table, table-row, table-cell) with 1 custom polymer-element defining the div for the table, and another polymer-element defining the divs for the rows and cells, like this
<my-table>
<my-row col1="contents of column 1" col2="column 2">
--html for content of column 3--
</my-row>
</my-table>
The problem I’m having is that the div created by with the “display:table;” isn’t being recognized by the divs created by with the “display:table-row” and “display:table-cell”. The divs created by seem to think they are in their own individual tables.
Is there a way to get this to work? If the answer is to use ::content ::shadow, then I need to be shown how because I can’t get it to work and behave as a single large table.
Solution
You should style the host
of the polymer element, not the divs inside it.
Here is an example: https://gist.github.com/jakemac53/0d073615d723502a61ca
Answered By – Jake MacDonald
Answer Checked By – Timothy Miller (FlutterFixes Admin)