首页  >  文章  >  web前端  >  CSS使用样式table-layout:fixed后单元格宽度设置的解决

CSS使用样式table-layout:fixed后单元格宽度设置的解决

黄舟
黄舟原创
2017-06-30 13:51:011939浏览

下面的代码,是想在使用 table-layout:fixed 后,本意是想让单元格的宽度保持有效,在 IE 中测试,宽度设置是无效的:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td style="width:100px">1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td>1.1</td>
    <td style="width:80px">2.1</td>
    <td style="width:20px">2.2</td>
  </tr>
</table>

下面给出解决方法,table-layout:fixed 样式使用后,除第一行外,剩下的行中单元格的宽度,是按照第一行中的单元格宽度设定的,既然这样,我们就设置一个隐藏的行来规定宽度:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1">
<tr style="display:none">
  <td style="width:100px"></td>
  <td style="width:80px"></td>
  <td style="width:20px"></td>
</tr>
<tr>
  <td>1</td>
  <td colspan="2">2</td>
</tr>
<tr>
  <td>1.1</td>
  <td>2.1</td>
  <td>2.2</td>
</tr>
</table>

这个方法,在IE6,IE7,IE8中都可以正确地显示,但在非IE中,是没起作用的。下面给出另外一种方法:

<style>
td{border:1px solid red;}
</style>
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1">
<tr style="height:0;">
  <th style="width:100px"></th>
  <th style="width:80px"></th>
  <th style="width:20px"></th>
</tr>
<tr>
  <td>1</td>
  <td colspan="2">2</td>
</tr>
<tr>
  <td>1.1</td>
  <td>2.1</td>
  <td>2.2</td>
</tr>
</table>

以上是CSS使用样式table-layout:fixed后单元格宽度设置的解决的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn