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:

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?

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

asked Jun 18 '13 at 18:55

mkautzm

48411129

Besides your problem, please apply your font styles and the padding to body and not body *. The asterisk there selects ALL elements inside body (basically all visible elements on your site). Edit: What about the width-attribute on your tables?
– kleinfreund
Jun 18 '13 at 18:59

your html seems invalid. The first error I saw is on line 52, where you close a nested table that was never opened... Try validating your code validator.w3.org
– Pevara
Jun 18 '13 at 19:02

add a comment |

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:

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;

    }

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

Why aren't these cells lining up?

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

asked Jun 18 '13 at 18:55

mkautzm

48411129

Besides your problem, please apply your font styles and the padding to body and not body *. The asterisk there selects ALL elements inside body (basically all visible elements on your site). Edit: What about the width-attribute on your tables?
– kleinfreund
Jun 18 '13 at 18:59

your html seems invalid. The first error I saw is on line 52, where you close a nested table that was never opened... Try validating your code validator.w3.org
– Pevara
Jun 18 '13 at 19:02

add a comment |

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:

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;

    }

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

Why aren't these cells lining up?

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

asked Jun 18 '13 at 18:55

mkautzm

48411129

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:

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;

    }

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

Why aren't these cells lining up?

html css css-tables

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

asked Jun 18 '13 at 18:55

mkautzm

48411129

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

asked Jun 18 '13 at 18:55

mkautzm

48411129

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

edited Nov 20 at 21:14

Brian Tompsett - 汤莱恩

4,1631337100

asked Jun 18 '13 at 18:55

mkautzm

48411129

asked Jun 18 '13 at 18:55

mkautzm

48411129

asked Jun 18 '13 at 18:55

mkautzm

48411129

Besides your problem, please apply your font styles and the padding to body and not body *. The asterisk there selects ALL elements inside body (basically all visible elements on your site). Edit: What about the width-attribute on your tables?
– kleinfreund
Jun 18 '13 at 18:59

your html seems invalid. The first error I saw is on line 52, where you close a nested table that was never opened... Try validating your code validator.w3.org
– Pevara
Jun 18 '13 at 19:02

add a comment |

Besides your problem, please apply your font styles and the padding to body and not body *. The asterisk there selects ALL elements inside body (basically all visible elements on your site). Edit: What about the width-attribute on your tables?
– kleinfreund
Jun 18 '13 at 18:59

your html seems invalid. The first error I saw is on line 52, where you close a nested table that was never opened... Try validating your code validator.w3.org
– Pevara
Jun 18 '13 at 19:02

Besides your problem, please apply your font styles and the padding to body and not body *. The asterisk there selects ALL elements inside body (basically all visible elements on your site). Edit: What about the width-attribute on your tables?
– kleinfreund
Jun 18 '13 at 18:59

your html seems invalid. The first error I saw is on line 52, where you close a nested table that was never opened... Try validating your code validator.w3.org
– Pevara
Jun 18 '13 at 19:02

add a comment |

3 Answers
3

active

oldest

votes

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

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

That is the solution! I did not even know <col> was a thing until today. Thanks!
– mkautzm
Jun 18 '13 at 19:26

add a comment |

Try using this on all the tables:

table-layout:fixed;

Table layout property in w3schools

Regards,
Nikola

answered Jun 18 '13 at 19:03

NBoychev

211

1

i would propose this as well :) w3.org/wiki/CSS/Properties/table-layout
– G-Cyr
Jun 18 '13 at 19:13

Sure, w3.org is always better than w3schools :)
– NBoychev
Jun 18 '13 at 19:24

add a comment |

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/

edited Jun 18 '13 at 19:27

answered Jun 18 '13 at 19:14

Don

2,684826

After ctrl+f-ing the entire document, there are a lot of places with the 'Wdith' typo. Thanks for the catch!
– mkautzm
Jun 18 '13 at 20:05

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17176690%2fhtml-tables-arent-aligning-correctly-with-css%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

That is the solution! I did not even know <col> was a thing until today. Thanks!
– mkautzm
Jun 18 '13 at 19:26

add a comment |

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

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

That is the solution! I did not even know <col> was a thing until today. Thanks!
– mkautzm
Jun 18 '13 at 19:26

add a comment |

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

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

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

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

answered Jun 18 '13 at 19:06

G-Cyr

58.7k85880

That is the solution! I did not even know <col> was a thing until today. Thanks!
– mkautzm
Jun 18 '13 at 19:26

add a comment |

That is the solution! I did not even know <col> was a thing until today. Thanks!
– mkautzm
Jun 18 '13 at 19:26

That is the solution! I did not even know <col> was a thing until today. Thanks!
– mkautzm
Jun 18 '13 at 19:26

add a comment |

Try using this on all the tables:

table-layout:fixed;

Table layout property in w3schools

Regards,
Nikola

answered Jun 18 '13 at 19:03

NBoychev

211

1

i would propose this as well :) w3.org/wiki/CSS/Properties/table-layout
– G-Cyr
Jun 18 '13 at 19:13

Sure, w3.org is always better than w3schools :)
– NBoychev
Jun 18 '13 at 19:24

add a comment |

Try using this on all the tables:

table-layout:fixed;

Table layout property in w3schools

Regards,
Nikola

answered Jun 18 '13 at 19:03

NBoychev

211

1

i would propose this as well :) w3.org/wiki/CSS/Properties/table-layout
– G-Cyr
Jun 18 '13 at 19:13

Sure, w3.org is always better than w3schools :)
– NBoychev
Jun 18 '13 at 19:24

add a comment |

Try using this on all the tables:

table-layout:fixed;

Table layout property in w3schools

Regards,
Nikola

answered Jun 18 '13 at 19:03

NBoychev

211

Try using this on all the tables:

table-layout:fixed;

Table layout property in w3schools

Regards,
Nikola

answered Jun 18 '13 at 19:03

NBoychev

211

answered Jun 18 '13 at 19:03

NBoychev

211

answered Jun 18 '13 at 19:03

NBoychev

211

answered Jun 18 '13 at 19:03

NBoychev

211

1

i would propose this as well :) w3.org/wiki/CSS/Properties/table-layout
– G-Cyr
Jun 18 '13 at 19:13

Sure, w3.org is always better than w3schools :)
– NBoychev
Jun 18 '13 at 19:24

add a comment |

1

i would propose this as well :) w3.org/wiki/CSS/Properties/table-layout
– G-Cyr
Jun 18 '13 at 19:13

Sure, w3.org is always better than w3schools :)
– NBoychev
Jun 18 '13 at 19:24

i would propose this as well :) w3.org/wiki/CSS/Properties/table-layout
– G-Cyr
Jun 18 '13 at 19:13

Sure, w3.org is always better than w3schools :)
– NBoychev
Jun 18 '13 at 19:24

add a comment |

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/

edited Jun 18 '13 at 19:27

answered Jun 18 '13 at 19:14

Don

2,684826

After ctrl+f-ing the entire document, there are a lot of places with the 'Wdith' typo. Thanks for the catch!
– mkautzm
Jun 18 '13 at 20:05

add a comment |

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/

edited Jun 18 '13 at 19:27

answered Jun 18 '13 at 19:14

Don

2,684826

After ctrl+f-ing the entire document, there are a lot of places with the 'Wdith' typo. Thanks for the catch!
– mkautzm
Jun 18 '13 at 20:05

add a comment |

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/

edited Jun 18 '13 at 19:27

answered Jun 18 '13 at 19:14

Don

2,684826

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/

edited Jun 18 '13 at 19:27

answered Jun 18 '13 at 19:14

Don

2,684826

edited Jun 18 '13 at 19:27

answered Jun 18 '13 at 19:14

Don

2,684826

answered Jun 18 '13 at 19:14

Don

2,684826

answered Jun 18 '13 at 19:14

Don

2,684826

After ctrl+f-ing the entire document, there are a lot of places with the 'Wdith' typo. Thanks for the catch!
– mkautzm
Jun 18 '13 at 20:05

add a comment |

After ctrl+f-ing the entire document, there are a lot of places with the 'Wdith' typo. Thanks for the catch!
– mkautzm
Jun 18 '13 at 20:05

After ctrl+f-ing the entire document, there are a lot of places with the 'Wdith' typo. Thanks for the catch!
– mkautzm
Jun 18 '13 at 20:05

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg