Question

我在Firefox中遇到表的行为有问题。我想要一个由比例为3：1的两列组成的表。第一列包括第二个表中的3个图像，这些图像应调整大小以适合列。

在Chrome中，图片会调整大小以适合第一列，该列已正确设置为75％。无论我指定最大宽度还是不给它们任何大小属性，它们都会这样做。但是，在Firefox中，图像不会调整大小，而是单元格扩展为大于75％，这意味着第二列的内容会被压扁。

代码的结构如下所示：

<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>

如何调整此代码以使其在Firefox和Chrome中正常运行？我已经阅读了其他相关问题，但未能找到我可以开始工作的解决方案。

P.S。请不要评论我不应该像这样使用CSS。我有理由在我玩游戏时不使用合适的样式表。

Answer 1

除非我错过了船，为什么不简单地为图像指定相对宽度？值100％将确保图像与其父表格单元格一起调整大小：

<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>

参考：http://jsfiddle.net/j26Fm/

Answer 2

我要说的是table-layout: fixed;。它确实需要一些额外的规则，但table-layout是将它们组合在一起的原因。

退房：http://codepen.io/pstenstrm/pen/kLKxz

Answer 3

这对我，IE，FF和Chrome都有用。

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

和

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

在Firefox中将列宽设置为百分比

3 个答案: