CODEWITHSUNDEEP
htmlcsscss-tables
mkautzm
mkautzm

Reputation: 1146

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?

Upvotes: 0

Views: 275

Answers (3)

Don
Don

Reputation: 4157

There are various places you have the typo 

cellWdith310

Assuming you've left out some CSS then that could be the issue

UPDATE: Here's a JS fiddle. There were just various problems with your HTML such as not having enough TDs in the last table etc. Diff the source see what's different

http://jsfiddle.net/AhLAD/7/

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

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

Upvotes: 2

NBoychev
NBoychev

Reputation: 21

Try using this on all the tables:

table-layout:fixed;


Table layout property in w3schools

Regards, Nikola

Upvotes: 2

Related Questions