Question

我真的很喜欢这个在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编辑器来玩这个。在此先感谢您的帮助！

Answer 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;

}

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

1 个答案: