Table alignment issue using CSS

Question

I am quite new to using HTML and CSS and need some help aligning 3 separate tables so the vertical columns align as you go down through the page.

Due to the different amount of content in each of the tables they don't at the moment. I have tried finding advice on other posts but have not had much luck. I have the width of the tables set all the same but the columns I need them to differ in size the first two being around the same and the last one being the longest having the most content inside it.

What's the proper way I can achieve this?

Align the Columns vertically.

Why don't you use one table with three columns and three rows? Like this JSFiddle. Is that what you want? — Robin
– Robin, Commented Oct 27, 2014 at 16:52

RicheTheBuddha · Accepted Answer · 2015-04-18 20:10:47Z

2

It would be best if you fixed the width of each column, then everything should line up nicely. Just pick a width value that matches the max likely width you are going to need.

The CSS syntax is simple. If you declare the cell in the html with something like:

<th class="col1">

in the first column header, then you can define the width of the column in the CSS with:

.col1 {width:130px}

edited Apr 18, 2015 at 20:10

answered Oct 27, 2014 at 16:47

RicheTheBuddha

364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cardcodez · Accepted Answer · 2014-10-27 16:45:30Z

0

You can try adding the following to your CSS:

td { vertical-align: top; }

You can also change 'top' to 'middle' or 'bottom' depending on where you want the content aligned.

Hope this helps!

answered Oct 27, 2014 at 16:45

cardcodez

31 bronze badge

Comments

David Fernandes · Accepted Answer · 2014-10-27 16:45:40Z

0

You can achieve that by doing the following:

table .centered {
     margin-left : auto;
     margin-right: auto;
}

This will work if your tables have the same width.

answered Oct 27, 2014 at 16:45

David Fernandes

1336 bronze badges

Collectives™ on Stack Overflow

Table alignment issue using CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related