CODEWITHSUNDEEP
javascripthtmlcsshtml-tablecellpadding
Perry Monschau
Perry Monschau

Reputation: 901

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?

Upvotes: -1

Views: 54

Answers (2)

anast3t
anast3t

Reputation: 92

habitruler maybe inherits style from habits, try !important

(also show css from devtools for habitruler)

Upvotes: 1

Khurram Javed
Khurram Javed

Reputation: 11

Try using:

table{ table-layout:fixed; width: 100%;}

If it doesn't solve the problem please show what's styling and is having. So, I can propose better solution.

Upvotes: 0

Related Questions