4

我在这个问题上苦苦挣扎了很长一段时间，但找不到合适的解决方案来解决我的问题。

我有的：

<div style="width:150px; border:1px solid #000;overflow: auto;">
    <div>SOME TEXT</div>
    <table style="width:100%; border:1px solid #0F0;">
        <tr>
            <td>HEAD1</td>
            <td>HEAD2</td>
            <td>HEAD3</td>
        </tr>
        <tr>
            <td colspan="3">
                <div style="overflow: auto; border:1px solid #F00;">
                    <table>
                        <tr>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                        </tr>
                        <tr>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

http://jsfiddle.net/37ExS/

解释：

外部 div 代表我的内容包装器，其中包含一些其他 div 和一个带有数据的表。数据表内部是一行，其中包含另一个表，其中包含参考它上面的行的详细数据。

我想要的是：

包含详细信息表的当前列跨度为“3”的表格单元格应该具有溢出的内容，从而创建滚动条。这就是为什么我将内容包装在另一个 div 中的原因，但似乎 div 的宽度是由它的内容决定的，而不是由它的父母 (TD) 宽度决定的。为内部 div 设置固定宽度是可行的，但我希望它是动态的，因为我真的不知道内容包装器的宽度。

我希望这是可以理解的。

更新：

这就是它的行为方式：http: //jsfiddle.net/eRA33/

我可以使用它并且对此很好，但我真的不知道跨浏览器支持，而且它对我来说看起来有点 hacky，如果有人有更好的方法来做到这一点，那就太好了。

4

1 回答 1

0

问题是您不能在表格元素上使用溢出属性。一个更好的方法（在我看来）是添加tbody标签并将它们设置为display: block. 这让他们滚动。这也避免了使用一堆包装 div。

不用担心使用表格布局；它得到了很好的支持。

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

这是一个小小提琴来演示。我把你的风格放在风格部分，因为这样更容易工作:)

http://jsfiddle.net/eRA33/2/

HTML

<div class="wrapper">
<div>SOME TEXT</div>

<table class="table-scroll table-data">
    <tbody>
        <tr>
            <td>HEAD1</td>
            <td>HEAD2</td>
            <td>HEAD3</td>
            <td>HEAD4</td>
        </tr>
        <tr>
            <td colspan="4">
                <table class="table-scroll table-detail">
                    <tbody>
                        <tr>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                            <td>HEAD</td>
                        </tr>
                        <tr>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                            <td>QQQQ</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</div>

CSS

.wrapper {
    width:180px;
    border:1px solid #000;
}

.table-scroll {
    width:100%;
    table-layout: fixed;
}

.table-scroll tbody {
    display:block;
    overflow:scroll;
}

.table-data {
    border:1px solid #0F0;   
}
.table-detail {
    border:1px solid #F00;
}
于 2013-05-24T02:06:04.593 回答