javascripthtmlcsshtml-tablecellpadding

Table cells lose spacing when inside div

I'm building a web app using HTML & SVG, and I've run into a weird problem with tables. When I move my table into a particular div, all the cells lose their spacing.

This is my expected result:

Intended result

This is what I actually get:

The habitruler table loses all spacing between cells

To achieve the expected result, I put my table 'habitruler' inside 'main' but above 'habits':

Current HTML structure that achieves intended result

What I want to do though is put 'habitruler' inside 'habits' like this:

Desired HTML structure

All I'm doing is moving it inside another div, but the moment I do that all the spacing disappears between cells as you see in image #2.

This is the css for the div 'habits':

CSS for habits

And this is the table inside 'habitruler':

habitruler's html structure

This even happens when I remove all the other child elements from 'habits'. I can't find anything out of the ordinary that would cause this. I also can't find any information on tables that would explain this behaviour. Does anyone have an idea why this is happening, or what I can try next to find out?

Solution

  • habitruler maybe inherits style from habits, try !important

    (also show css from devtools for habitruler)