在ie 7或ie 6里怎么让超出td宽度的内容浮动显示在后面的td里-HTML教程-爱易网页

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

日期：2014-05-16　浏览次数：20691 次

在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&nb

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>