CODEWITHSUNDEEP
htmlcss
davey
davey

Reputation: 1564

align 2 table column widths with each other

I have 2 tables one on top of the other and I would like to align their column widths exactly with each other, is there a way to do this? Tried fixed table col widths etc no joy

You can see on fiddle the columns are slightly off each other http://jsfiddle.net/askhe/

HTML

<table class="tblresults txtblack">
                            <tr class="tblresultshdr bold">
                                <td class="col1">Company</td>
                                <td>Currency</td>
                                <td>Bid</td>
                                <td>Ask</td>
                                <td>YTD Vol</td>
                            </tr>
                            <tr>
                                <td class="col1">ABC</td>
                                <td>GBP</td>
                                <td>94</td>
                                <td>16</td>
                                <td>3,567,900</td>
                            </tr>
                            <tr>
                                <td class="col1">DEF</td>
                                <td>GBP</td>
                                <td>3</td>
                                <td>46</td>
                                <td>10,000</td>
                            </tr>
                            <tr>
                                <td class="col1">GHI</td>
                                <td>GBP</td>
                                <td>3</td>
                                <td>46</td>
                                <td>10,000</td>
                            </tr>
                            <tr>
                                <td class="col1">JKLM</td>
                                <td>GBP    </td>
                                <td>7</td>
                                <td>46</td>
                                <td>56,000</td>
                            </tr>

</table>
                        <table class="tblresults txtblack margintop10">
                            <tr>
                                <td colspan="5" class="bold" >Investments</td>
                            </tr>
                            <tr>
                                <td class="col1">ghjk</td>
                                <td>GBP</td>
                                <td>13</td>
                                <td>6</td>
                                <td>130,000</td>
                            </tr>
                            <tr>
                                <td class="col1">asdsa</td>
                                <td>GBP</td>
                                <td>120</td>
                                <td>46</td>
                                <td>16,000</td>
                            </tr>
                            <tr>
                                <td class="col1">dfdsfsdf </td>
                                <td>GBP</td>
                                <td>1</td>
                                <td>4</td>
                                <td>13,000</td>
                            </tr>
                       </table>​

CSS

table.tblresults {
    width:100%;
    *width:99.5%;
    border: 1px solid #b9b8b8;
    top: 0;
}
table.tblresults tr.tblresultshdr {background: lightgrey;}
table.tblresults tr.tblresultshdr td {padding: 6px;}
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;}
table.tblresults td.col1 {width: 70%;}
​

Upvotes: 15

Views: 22031

Answers (5)

websiter
websiter

Reputation: 71

No need to merge tables, you can use this

table-layout: fixed;

There is a wonderful article here about it https://css-tricks.com/fixing-tables-long-strings/

Upvotes: 3

Jawand Singh
Jawand Singh

Reputation: 2046

Well, using this simple HTML snippet you can do it. well in my case i was creating pdf's from HTML, so this solution worked for me. Hope it help some one else. 

<table border=0>
  <tr>
    <td>
      <!--Insert table 1 -->
    </td>
    <td>
      <!--Insert table 2 -->
    </td>
  </tr>
</table>

Upvotes: -2

Rafiki
Rafiki

Reputation: 644

Although I agree that the solution to merge the tables is the best and simplest one in many cases, i came to the need to really have this 2 separate tables with identical columns (to make one table fixed and the 2nd scrollable)

to achieve that, I declared 2 tables with same number of columns, one with width rules (% and px), one without

Then, with Javascript, I applied the width of the ruled table to the free one:

document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ;
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ;

1st line fix the table width, then it's done column by column. Using .clientWidth is important, because .style.width send a percentage if it's what is applied on the ruled column.

This was almost working, but not quite. Table had a similar layout, but shifted by a few pixels. As I only needed that to be working in IE, I though I could move that with fixed values, to be as close as possible as what I wanted, so I change my code to:

document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10;

I guess the values could be different for a different table. But what surprised me, is that it works in every major browser, independently of the zoom level

windows resize breaks the alignement, so you need to bind the function to this event. Also, this solution don't work anymore on extreme size of the table

Here is a jsfiddle, as some CSS is involved. for the moment it doesn't work on zoom, because my floating header doesn't stick to right: 0px, don't know why yet

Upvotes: 1

Zeta
Zeta

Reputation: 105886

table elements where meant for scientific data, such as probes from experiments, not for actual layout:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

While you're not using them for layout, your problem is actually a rendering/layout issue. The easiest solution to this is to merge both tables into one (jsfiddle).

If you prefer your data to be encapsulated in many little tables instead of one giant table you'll need to specify a width for almost all columns.

Upvotes: 6

Cypress Frankenfeld
Cypress Frankenfeld

Reputation: 2527

Why not put them in the same table? It seems they are semantically similar. http://jsfiddle.net/askhe/5/

Upvotes: 3

Related Questions