Vandervals
Vandervals

Reputation: 6054

Table column losing width in chrome

I found this really strange difference between Chrome and Firefox behavior.

I have a column set with width: 25% and an image header. Without the image header both browsers behave in the same way, but with the image, the column loses its width on chrome. Check it here by clicking on the image:

input {
  display: none;
}
input:checked +img {
  display: none;
}
<table width='600' border='0' cellspacing='0' style='margin:0; padding:0; text-align:center; background:white; color: #555; font-size:18px; font-weight:300; font-family: Roboto, Verdana, Arial, sans-serif'>
  <tbody>
    <tr>
      <td colspan="4">
        <label>
          <input type="checkbox">
          <img src="http://www.esandra.com/file/2012/09/slider-imagen.jpg">
        </label>
      </td>
    </tr>
    <tr>
      <td colspan="4">APPROVED</td>
    </tr>
    <tr>
      <td style="width:25%;">LOC</td>
      <td>Name</td>
      <td>#</td>
      <td>age</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>Simon</td>
      <td>1</td>
      <td>18</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>Niles</td>
      <td>2</td>
      <td>51</td>
    </tr>
    <tr>
      <td colspan="4">NOT APPROVED</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>What happens if any name is thiiiiiis long</td>
      <td>3</td>
      <td>13203203212 seconds and 1215 minutes</td>
    </tr>
  </tbody>
</table>

I think this is different from other questions because it is only happening when the image is there...

Here is a pen for you to try stuff: http://codepen.io/vandervals/pen/waPQZj?editors=110

Does someone know how to make it work in Chrome like it works in Firefox?

Edit: I forgot to mention that this is for a newsletter with variable content, that is why tables are a requirement (otherwise I wouldn't hurt myself by using them).

Upvotes: 0

Views: 315

Answers (1)

Zubzob
Zubzob

Reputation: 2743

Try adding table-layout: fixed; to your table. See fiddle.

Later edit:

I got the the functionality of firefox in chrome as well by adding max-width: 100% to the image. See fiddle.

Upvotes: 1

Related Questions