CODEWITHSUNDEEP
htmlcssfirefox
ajor
ajor

Reputation: 1634

Setting column width to a percentage in Firefox

I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.

In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.

The structure of the code looks like this:

<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
 <tbody>
  <tr>
   <td style="vertical-align:top;width:75%;">
    <table cellpadding="2" cellspacing="0">
     <tbody>
      <tr>
       <td>
        <img src="image1.jpg" style="max-width:625px;" />
       </td>
       <td rowspan="2">
        <img src="image2.jpg" style="max-width:240px;" />
       </td>
      </tr>
      <tr>
       <td>
        <img src="image3.jpg" style="max-width:625px;" />
       </td>
      </tr>
     </tbody>
    </table>
   </td>
   <td>
    Second column
   </td>
  </tr>
 </tbody>
</table>

How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.

P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.

Upvotes: 1

Views: 1515

Answers (3)

Flavio Ariano
Flavio Ariano

Reputation: 71

This is worked for me, in IE, FF and Chrome.

<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">

and

<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>

Upvotes: 0

pstenstrm
pstenstrm

Reputation: 6489

The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.

Check out: http://codepen.io/pstenstrm/pen/kLKxz

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16733

Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:

<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
 <tbody>
  <tr>
   <td style="vertical-align:top;width:75%;">
    <img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
   </td>
   <td>
    Second column
   </td>
  </tr>
 </tbody>
</table>

ref: http://jsfiddle.net/j26Fm/

Upvotes: 1

Related Questions