使用表格布局时列宽错误:已修复

时间:2013-01-23 11:28:14

标签: html css html-table

在我的example jsfiddle我有两个HTML表格。它们基本相同 - 相同的类,相同的内容,一切。唯一的区别是行的顺序。

<style>
.tbl-lay-fixed {table-layout:fixed}
</style>

<table class="tbl-lay-fixed" border="1" width="100%">
   <tr>
      <td width="5%">xxxx</td>
      <td width="95%">yyyyyyyyyy</td>
   </tr>
   <tr>
      <td colspan="2" width="100%">xxxx</td>
   </tr>
</table>

<table class="tbl-lay-fixed" border="1" width="100%">
   <tr>
      <td colspan="2" width="100%">xxxx</td>
   </tr>
   <tr>
      <td width="5%">xxxx</td>
      <td width="95%">yyyyyyyyyy</td>
   </tr>
</table>

表1正确显示 - 单元格的宽度正确。

表2显示不正确 - 第二行有两列,其中witdh设置为5%,95%相应,但它显示为50%50%。

Problem with table-layout:fixed;

问题出在哪里?它在所有浏览器中都是一样的。

1 个答案:

答案 0 :(得分:1)

这似乎至少在Firefox中有效 (将底部TD colspan改为20)

just remove "width="100%" <table class="tbl-lay-fixed" border="1" width="100%"> from the table class