In Polymer Dart, how to build a CSS table using 1 polymer-element for the table and another for the rows and cells


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-row col1="contents of column 1" col2="column 2">
      --html for content of column 3--  

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.


You should style the host of the polymer element, not the divs inside it.

Here is an example:

Answered By – Jake MacDonald

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.