<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。
忘好心人指点。
IE9、腾迅浏览器、搜狗浏览器都不行的!!~~
我帮你改好了,自己收去看看~~
[code="html"]
Text Text Text Text Text Text Text Text |
[/code]
求在IE8中实现的代码