Styling removing cell padding and theming

[JariHanah]

Thanks for the Addon, any idea how to style the table, remove the cell padding to make the tables smaller, I managed to make the font size smaller, that is it.

[stefanuebe]

Hi, the created table is a simple html table, so there should be a lot of guides on how to style an html table on the net. :)

If you refer to Lumo styling, the addon does not provide any Lumo integration at the moment, so changing Lumo variables do not affect the table at the moment. Maybe at a later time I will add some support for that.

[JariHanah]

Thanks Stefan,
I am not experienced with CSS, but I added this code,
table.year{
border-collapse: collapse; /* Remove cell spacing /
}
table.year, th, td{
border: 0px solid #666;
}
table.year th, table td{
padding: 0px; / Apply cell padding */
cellspacing: 0;
}

I also added the Class names to both TableRows, and Table.

I can see the effects on the HTML code inspection, still.
I didnt get a postive effect, seems the lumo theme is stronger to override. unless there is another way.
except for the font size.

TableRow row = yearTable.addRow();
row.setClassName("year");

yearTable.getStyle().set("font-size", "12px");
yearTable.setClassName("year");
yearTable.getStyle().set("border-spacing","0");

[stefanuebe]

I added your styles and your table to my demo, added some content and got this:

So your styles are applied correctly. Are you importing the stylesheet to your view?

---

Regarding the css, I am not sure, if your css is intended to be this way, as you open comments, but do not correctly close them, thus the resulting css is partially commented out

(Also a border of 0px makes no sense except for you want to not show it. But then the more correct css would be border: 0 none;. In general it is recommended to leave the unit out of any 0. )