CODEWITHSUNDEEP
htmlcssalignmentcss-tables
ryanh92
ryanh92

Reputation: 15

Table alignment issue using CSS

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.

Upvotes: 1

Views: 51

Answers (3)

RicheTheBuddha
RicheTheBuddha

Reputation: 36

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}

Upvotes: 2

David Fernandes
David Fernandes

Reputation: 133

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.

Upvotes: 0

cardcodez
cardcodez

Reputation: 3

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!

Upvotes: 0

Related Questions