td里面加div，内容超出后浮动到后面的td中

最新推荐文章于 2023-12-13 14:19:21 发布

转载最新推荐文章于 2023-12-13 14:19:21 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/520yun/p/3370669.html

本文探讨了在IE8浏览器中使用HTML表格布局时遇到的挑战，特别是当table-layout属性为fixed时如何使单元格内容正确显示。通过具体代码示例展示了不同条件下表格的显示效果，并提出了解决方案。

<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: top;
    padding-left: 3px 3px;
}
.cell .text {white-space:nowrap;position:absolute;height:25px;padding: 5px 0;}
</style>
<div style="width: 250px">
<table width="100%" class="table">
  <tr class="row">
    <td class="cell">
      <div class="text">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>