12

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 rows. I would like for these 2 tables to have the exact same column width so that the columns always line up. I don't mind if the text within the columns wraps as much as necessary. And I cannot combine all the rows into a single table for other reasons.

Is there some way to make this happen?

Note that this solution only has to work in Firefox and the last 2 versions of IE.

3
  • 2
    Just curious about the reasons for not combining all of the rows into a single table, as that would have been my suggestion? putting each set of rows into its own <tbody> element, and adding a set of headers to each tbody can produce some good results.
    – belugabob
    Commented Jul 31, 2009 at 14:26
  • We are using an existing Javascript library to show/hide data tables based on various conditions. It works on entire tables at a time. I really didn't want to have to go in and modify that library if there was a way to get the result using HTML and/or CSS.
    – Shane
    Commented Jul 31, 2009 at 15:40
  • 1
    Ah, I see - that does make life awkward for you. The less obtrusive solution, then, is to force the widths of the columns to a known value, and I'd suggest doing this with CSS styles, rather than inline styles, as this means that you can change the values in one place but still affect every table. If you do decide to investigate the single table approach, you will be able to effectively hide 'whole tables' by hiding the tbody section that corresponds to a logical table.
    – belugabob
    Commented Aug 3, 2009 at 20:37

4 Answers 4

5

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>
1
  • This works IF: (1) you accept fixed sizes (yes, percentage is still fixed in the sense the browser isn't choosing it, the page author is choosing it), (2) the library puts classes on its columns for you to control with CSS, (3) if the size you pick is not too small for the cell with the longest single word. AND, so far, is the easiest solution I have seen. Commented Aug 27, 2015 at 13:46
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>
1
  • I've done this before with CSS making the borders as needed. It feels like a cheat, but it did work for me. Commented Jul 31, 2009 at 17:40
0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.