表格列失去寬度

我發現Chrome和Firefox行爲之間的這種真正奇怪的區別。表格列失去寬度

我有一個列設置width: 25%和圖像標題。如果沒有圖像頭，兩個瀏覽器的行爲方式都是相同的，但使用圖像時，列會在chrome上丟失寬度。點擊此處查看點擊圖片：

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>

我認爲這是其他問題不同，因爲它在圖像是隻存在發生......

這裏是一個筆爲你嘗試的東西：http://codepen.io/vandervals/pen/waPQZj?editors=110

有人知道如何使它在Chrome中工作，就像它在Firefox中工作？

編輯：我忘了提及，這是一個時事通訊與變量的內容，這就是爲什麼表是一個要求（否則我不會傷害自己，通過使用它們）。

來源

2015-06-25 Vandervals

嘗試將添加到您的表中。見fiddle.

後來編輯：

我在Chrome中加入max-width: 100%到圖像得到了火狐的功能也是如此。請參閱fiddle.

來源

2015-06-25 09:32:37 Zubzob

我只希望修復該列... – Vandervals

我看到了你的小提琴。我不喜歡它是如何工作的，因爲最終其餘的內容得到分發很差 – Vandervals

編輯我的答案 – Zubzob

表格列失去寬度

回答

相關問題