Question

我正在努力解决这个问题很长一段时间，但找不到合适的解决方案。

我有什么：

<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和一个包含数据的表。数据表的内部是一行，其中包含另一个表，其中包含参考其上方行的详细数据。

我想要的是什么：

当前包含详细信息表的colspan为“3”的表格单元格应该具有创建滚动条的溢出内容。这就是我将内容包装在另一个div中的原因，但似乎div的宽度取决于它的内容，而不是它的父级（TD）宽度。为内部div工作设置一个固定的宽度，但我想动态，因为我真的不知道内容包装器的宽度。

我希望这是可以理解的。

更新

这是它应该如何表现： http://jsfiddle.net/eRA33/

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

Answer 1

问题是你不能在table元素上使用overflow属性。一个更好的方法（在我看来），是添加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;
}

表TD宽度相对宽度溢出

1 个答案: