CSS：可滚动嵌套表，在 FF 中工作，在 IE 中失败答案

【问题标题】：CSS: Scrollable Nested Table, works in FF, fails in IECSS：可滚动嵌套表，在 FF 中工作，在 IE 中失败
【发布时间】：2010-10-05 11:47:24
【问题描述】：

我真的很想在 IE 中工作。我无法改变此处不应使用表格的事实。 IE 是我正在开发的项目唯一需要支持的浏览器。

代码如下：

<html>
<body>

<style type="text/css">
#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 95%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}
</style>

<div id="test">
<table>
<tr>
<td colspan="2">

<div class="scrollable">

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</    td>
</tr>

</table>

</div>

</td>
</tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
</body>
</html>

我一直在使用 Tryit 编辑器来玩这个。提前感谢您的帮助！

【问题讨论】：

你能澄清一下你期望的行为吗？

标签： css internet-explorer firefox

【解决方案1】：

我不确定您要完成什么，但请在您的 CSS 中尝试：

#test table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 50%;
}

#test table td {
   border: 1px solid rgb(0,0,0);
}

#test table div.scrollable {
   max-width: 100%;
   overflow: auto;
}

#test table table {
   table-layout: auto;
   width: 100%;
}

.scrollable {
    height:40px;
    width:100%;
    overflow-x:scroll;
    overflow-y:none;

}

【讨论】：

成功了！我用你的 .scrollable 替换了我的#test table div.scrollable 并且它有效。似乎指定 overflow-x 和 overflow-y 而不是简单地溢出解决了 IE 中的问题（并导致 FF 中的预期行为）。再次感谢！