Search code examples
htmlcsscss-tables

HTML Tables aren't aligning correctly with CSS

I have a series of tables that are stack on top of one another. They could be a single table, but for functional reasons, they are split up. They look something like this:

http://i.imgur.com/LICwuVF.png

Now, the problem is that they aren't lining up as I would expect them to. The code that governs them looks like so (It is quite lengthy):

http://pastebin.com/eWhEPzF5

The structure is 3 tables deep, and you can see it poke outside of the most inner table when it splits tables. Global styles are pretty simple:

body *
    {
    font-family:'Consolas';
    font-size:12pt;
    padding:0px;

    }
table
    {
        border: 0px;
        border-style:solid;
        padding:0px;
        border-spacing:0px;
        border-collapse:collapse; 
    }
td
    {
        padding:0px;
        border:0px;
        height:25px;
        border-style:solid;
    }

--

Now, I originally thought the input boxes is what was screwing up the alignment, but after removing them completely, nothing changed. In fact, adding rows one by one, it only 'breaks' when I add the first row of the first table ("Oh my look at all this data").

I doubled checked all the styling and everything and it all is correct.

Why aren't these cells lining up?

Solution

  • use class, <col> tag and colspan to set equals width in each tables.

    add table-layout:fixed; to avoid width to be resized by content.

    Now, if you make a codepen from your pastbin it would be confortable to re-use your code and see what you are up to , to devellop further. regards