-1

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?

Perry Monschau
  • 883
  • 8
  • 22
  • 1
    _"This is the css for the div 'habits':"_ - that's of rather little interest. What you should check, is what makes those cells have that spacing in the _working_ version. – CBroe Jul 29 '22 at 11:54
  • 1
    Also, before you ask the next time, please go read [Why should I not upload images of code/data/errors when asking a question?](//meta.stackoverflow.com/q/285551) – CBroe Jul 29 '22 at 11:55
  • CBroe thanks for the suggestion. I decided to check the computed styles of both versions, first the table, then the table cell. It looks like inside #habits the table cells become inline-blocks rather than table-cells. – Perry Monschau Jul 29 '22 at 12:07

2 Answers2

1

habitruler maybe inherits style from habits, try !important

(also show css from devtools for habitruler)

anast3t
  • 94
  • 5
0

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.

Khurram Javed
  • 11
  • 2