Make 2 tables have the same column sizes

Question

I have 2 HTML tables that are directly on top of each other. Each table has the same number of columns, but the text they contain can differ. And each table can contain many r

Answer 1

I suggest using percentage widths on your columns, making sure that those widths always add up to 100%.

<style type="text/css">
  table { width: 100%; }
  td.colA { width: 30%; }
  td.colB { width: 70%; }
</style>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

Answer 2

Table cells are fluid by nature, so that is not possible in just html / css unless you give the columns a fixed width (fixed can of course also be a percentage).

You could of course use javascript to find the widest table, get its column widths and use those values for the smaller table, but the solution suggested by belugabob as a comment to your question is far better.

Answer 3

As far as I know you can't align the columns of two tables.

You can create one table and use the css to make it look like two.

<table>
  <tr> <!-- First table header --> </tr>
  <tr> <!-- First table rows... --></tr>
  <tr> <!-- First table footer... --></tr>
  <tr> <!-- Empty space between tables --> </tr>
  <tr> <!-- Second table header --> </tr>
  <tr> <!-- Second table rows... --></tr>
  <tr> <!-- Second table footer... --></tr>
</table>

Answer 4

I got a similar situation fixed for my website on IE 9, Chrome 14 and FireFox 8 with following My table contain four columns, odd ones contain labels and even contains inputs. I have four tables on my page and all columns of each table are vertically aligned. Hope these steps would help

1- Download a transparent image from anywhere, probably of size 1x1 so that you can adjust its size as per your need (not sure if an image can be shrunk too by css)

2- Define your table as

    <table class="formed">
            <tr>
                <th class="colLabel"></th>
                <th class="colField"></th>
                <th class="colLabel"></th>
                <th class="colField"></th>
            </tr>
        <tr>
            <td></td>
[now rest of your columns row by row]

3- Define your css as

.colLabel
{
    text-align:right;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:8em;
}
.colField
{
    text-align:left;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:20em; 
}

.formed
{
    width:90%;
    table-layout:fixed;
    padding:0;
    margin:0;
}