how to align table columns of two tables

heeeep72 · Jun 6, 2005

Hi, ...a new challenging task for me again:

I have two tables on my html page (one of them is below the other one). None of them has fixed column widths. Even if so, I want their columns to allign with each other. I use CSS in my page, and i am totally unexperienced with that. Can I solve this problem without setting fixed column widths? (i had only one idea: i should put a line into both of them (same line into both of the tables), and make this line invisible in (at least one of) the tables). Is this a good idea? If yes, how to realize it? If this is no good solution, is there an other way to solve this? This would be very urgent for me. Can you give an idea how to make it?

Thx a lot!
heeeep

BillyRayPreachersSon · Jun 6, 2005

Take a look at this thread:

thread216-757680

You should be able to use the information in that to find the column widths of the first table, and use the same property to set them on the second.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

tsdragon · Jun 6, 2005

Or you can just use the information we gave you in your cross-posting in the HTML, XHTML & CSS forum.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

heeeep72 · Jun 7, 2005

Thank you Dan,

that script is really a good idea!!!
But how can i reference my w variable inside the table?

Code:

<script>
var w = findColumnWidths('myTable');
</script>


<table id="mySetTable" width="75%" cellspacing="2" border="Blue">

 <col width=[red][b]how can i reference my w variable here?[/b][/red]>
 <col width="100px">
 <col width="200px">
 <col width="100px">
 <col width="200px">
 <col width="100px">
 <col width="200px">

....
</table>

thx, for any remarks
heeeep

heeeep72 · Jun 7, 2005

Hi
...and a little more playing with the above resulted in almost aligning columns !!
I do not know what can be that little difference, because the tables are the same otherwise.

Code:

<html>
<head>
<script language="javascript">
    function findColumnWidths(tableId)
    {
        var myTable = document.getElementById(tableId);

        widthArray = new Array(10);
        for (var colLoop=0; colLoop<myTable.rows[0].cells.length; colLoop++) 
            widthArray[colLoop] = myTable.rows[0].cells[colLoop].offsetWidth ;
        
        /*for (var colLoop=0; colLoop<myTable.rows[0].cells.length; colLoop++) {                
        alert(widthArray[colLoop]);
        }*/
        
     return widthArray;
    }
</script>

</head>
<body>

<table id="myTable" width="75%" cellspacing="2" border="1">
<tr>
    <td>abcdefg</td>
    <td>hij</td>
    <td>klmnopqrstuvwxyz</td>
    <td>1</td>
    <td>23456</td>
    <td>789</td>
</tr>
</table>



<table id="mySetTable" width="75%" cellspacing="2" border="1">

<script type="text/javascript">
    var w = findColumnWidths('myTable');
    document.writeln('<col width=\"' + w[0] + 'px\">');
    document.writeln('<col width=\"' + w[1] + 'px\">');
    document.writeln('<col width=\"' + w[2] + 'px\">');
    document.writeln('<col width=\"' + w[3] + 'px\">');
    document.writeln('<col width=\"' + w[4] + 'px\">');
    document.writeln('<col width=\"' + w[5] + 'px\">');
</script>

<tr>
    <td>abcdefg</td>
    <td>hij</td>
    <td>klmnopqrstuvwxyz</td>
    <td>1</td>
    <td>23456</td>
    <td>789</td>
</tr>
</table>

</body>
</html>

The columns on the right hand side of 'mySetTable' not aligning precisely.

(

heeeeep

heeeep72 · Jun 8, 2005

Hi

It seems, that the col width element is not supported by the non MSIE browsers. Is there a [red]browser independent way[/red] , that I can set column widths of tables ??? My solution has to work with MSIE and FF as well.

thx in advance
heeeep

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

how to align table columns of two tables

heeeep72

Programmer

BillyRayPreachersSon

Programmer

tsdragon

Programmer

heeeep72

Programmer

heeeep72

Programmer

heeeep72

Programmer

Similar threads

Part and Inventory Search

Sponsor