Search code examples
htmlcssalignmentcss-tables

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.

Solution

  • 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}