欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

在ie 7或ie 6里怎么让超出td宽度的内容浮动显示在后面的td里

更新时间: 2014-01-05 00:52:15 责任编辑: Author_N1

 

在ie 7或ie 6里如何让超出td宽度的内容浮动显示在后面的td里

<html>
<body style="font:16px Arial;">
<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
font: normal 11px arial;
}
.row {
height:25px;
}
.cell {
background-color:#ECF4FE;
font-family:Arial,Verdana,sans-serif;
font-size: 11px;
border-bottom-width: 1px;
border-bottom-color: #ECF4FE;
border-bottom-style: dotted;
border-top: none;
border-left: 1px solid #EC0000;
border-right: 1px solid #EC0000;
vertical-align: middle;
padding-left: 3px;
padding-right: 3px;
}
</style>
<div style="width: 250px">
<table width="100%" class="table">
  <tr class="row">
    <td class="cell">
      <div style="white-space:nowrap;">Text Text Text Text Text Text Text Text</div>
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
  </tr>
</table>
</div>
</body>
</html>


如题和上述代码,在ie7标准模式下。
 
情形一:
如果表格上面有 table-layout: fixed; 这个样式,上述代码在页面上显示的效果是


情形二:
如果表格上面没有 table-layout: fixed; 这个样式,上述代码在页面上显示的效果是


 很显然这两种结果都不理想。
在我现在的需求里,限于总体设计的因素,table标签上的table-layout: fixed; 是必须要有的。但是我又需要把单元格里超出单元格的那些内容浮动显示在它后面的各个单元格里,不能像情形二里那样直接把第一个单元格拉宽。理想效果如下



上面的理想效果目前在IE 8,Firefox,Chrome,Safari,Opera这几款浏览器里都实现了,就差ie 7,也许还有ie 6。

忘好心人指点。

--参考方法--
这个太简单了,不用 fixed,用absolute

另外,你的table太多垃圾代码了。。样式其实可以很简化。。


<html>
<style type="text/css">
body{font-size:12px; font-family:Tahoma, Geneva, sans-serif; height:25px; line-height:25px;}
.table {
    border-collapse: collapse;
    table-layout: fixed;
    font: normal 11px arial;
}
.row {
    height:25px;
}
.cell {
    background-color:#ECF4FE;
    font-family:Arial,Verdana,sans-serif;
    font-size: 11px;
    border-bottom-width: 1px;
    border-bottom-color: #ECF4FE;
    border-bottom-style: dotted;
    border-top: none;
    border-left: 1px solid #EC0000;
    border-right: 1px solid #EC0000;
    vertical-align: middle;
    padding-left: 3px;
    padding-right: 3px;
}
.txt{position:absolute;}
</style>

<body>
<div style="width: 250px">
<div class="txt">Text Text Text Text Text Text Text Text</div>
<table width="100%" class="table">
  <tr class="row">
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
    <td class="cell">
    </td>
  </tr>
</table>
</div>
</body>
</html>

--参考方法--
在DIV增加 position:relative,IE9通过;
<html>
<body style="font:16px Arial;">
<style type="text/css">
.table {
    border-collapse: collapse;
    table-layout: fixed;
    font: normal 11px arial;
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:52:15
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/799/
本文WWW.DOC100.NET DOC100.NET版权所有。