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

php中文网

发布时间：2016-06-21 09:47:59

1196人浏览过

来源于php中文网

原创

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

忘好心人指点。

字狐AI

由GPT-4 驱动的AI全能助手，支持回答复杂问题、撰写邮件、阅读文章、智能搜索

下载

回复讨论(解决方案)

这个太简单了，不用 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>

楼上的，表格的存在还有什么意义呢．．．

楼上的，表格的存在还有什么意义呢．．．

这个我也不清楚，你问LZ

主要是功能能实现就好。

在DIV增加 position:relative，IE9通过；