CODEWITHSUNDEEP
html
Registered User
Registered User

Reputation: 3699

How to set table width to 100% with a mix of relative and fixed size columns

I have this table width set to 100%. Inside I have 3 columns, the middle one should be fixed to 300px. Left and Right columns should be divided equally in the remaining space.

The result is that the col with the image gets stretched. How to fix this so that left and right cols stay the same size?

http://jsfiddle.net/RqhCv/

Important note: Do not add any content to left column, the content must remain  
Also must work in IE7

Please Do NOT post answers about DIVs. This question is about tables.

   <table style="width:100%;height:100%;">
        <tr>
            <td bgcolor="#FF0000">&nbsp;</td>
            <td bgcolor="#99CC33" style="width:300px;">this is 300PX</td>
            <td bgcolor="#0000FF"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></td>
        </tr>
    </table>

...

I did try already a lot of things including COLGROUP, nothing works...

Upvotes: 2

Views: 10274

Answers (2)

Registered User
Registered User

Reputation: 3699

After few hours of trials I was able to produce this code.

Works in all browsers with a slight shift to the left in Webkit, but I think I can live with that.

This does look dangerous and I don't like it at all, but I tested in latest Crome,FF,Opera,IE9,IE8,IE7, Safari and Safari on iPad. All look OK.

Still, If someone has any input on this or a better solution, don't hesitate to post.

<table style="width:100%;height:100%;">
    <tr>
        <td bgcolor="#FF0000" style="width:50%;">&nbsp;</td>
        <td bgcolor="#99CC33" style="width:300px;"><img src="p.png" width="300" height="1"></td>
        <td bgcolor="#0000FF"  style="width:50%;"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" style="display:block;" width="377" height="167"></td>
    </tr>

</table>

Upvotes: 2

Dave
Dave

Reputation: 5029

This seems to work in making the right and left columns the same size, with the middle column 300px;. I wasn't sure what you wanted to do with the image though. 

<table style="width:100%;height:100%;table-layout:fixed;overflow:hidden" >
    <tr>
        <td bgcolor="#FF0000" style="width:50%;"></td>
        <td bgcolor="#99CC33" style="width:300px;"><div style="width:300px">this is 300PX</div></td>
        <td bgcolor="#0000FF" style="width:50%;" ><div style="overflow:scroll"><img src="http://www.google.com/logos/2012/kondratyuk-12-hp.jpg" width="377" height="167"></div></td>
    </tr>
</table>

Upvotes: 2

Related Questions