Question

我有一个要求，我已经创建了一个表，并在表的内部行创建了另一个表。要求是在内部表中添加新元素时不要增加内部表的高度，而是在内部表中添加新数据时使用它来显示滚动条（使用class = newTable）并且内部表高度似乎增加。请建议如何在表格中添加更多数据时动态显示内部表格内的滚动条（class = newTable），并且表格高度似乎会增加。感谢。

- 编辑 -

请找小提琴http://jsfiddle.net/7t9qkLc0/4/。如果数据在表格中受限，我怎么能隐藏滚动条图标，只有当数据更多且表高度似乎增加时才显示滚动条。我尝试使用css overflow:hidden，但没有给出结果。

Answer 1

我没有使用您的代码示例。我写了一个我自己的例子，这是你想做的吗？

http://codepen.io/Vall3y/pen/dPPLEw

诀窍是设置行的高度，设置溢出以滚动，并将显示设置为内联块。

.inner-table-tr {
  height: 30px;
  overflow-y: scroll;
  display: inline-block;
}

Answer 2

如果我说得对，并且当新元素进入“newTable”类表时你想要一个滚动条，你可以用div（在td内）包装这个表并在它获得时滚动它特定的高度（在这个例子中是100'px'，但是把它改成你需要的），我已经使用了max-height所以当它不需要时它不会达到高度。我在jsfiddle示例中添加了一个按钮来增加元素，这样当更多元素进入“newTable”类表时，您可以看到发生了什么。

HTML：

<div id="test" style="float: left; border: 0px solid #99ffff;">
    <table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
        <tr>
            <td>
                <a id="">
                    <table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
                        <tr style="background-color: cyan;" bordercolor="#ffffff">
                            <td colspan="3">
                                <span style="float:left">Another New table starts below</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
                                <div>
                                    <table width="300px" border="1" class="newTable">
                                        <tr>
                                            <td width="150px">Column1</td>
                                            <td width="150px">Column2</td>
                                        </tr>
                                    </table>
                                </div>
                                <table width="300px" height="150px" border="1">
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;1</td>
                                        <td>data1</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;2</td>
                                        <td>data2</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;3</td>
                                        <td>data3</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;4</td>
                                        <td>data4</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;1</td>
                                        <td>data1</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;2</td>
                                        <td>data2</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;3</td>
                                        <td>data3</td>
                                    </tr>
                                    <tr>
                                        <td>data&nbsp;&nbsp;&nbsp;4</td>
                                        <td>data4</td>
                                    </tr>
                               </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
                                <table width="300px">
                                    <tr>
                                        <td> This is another td element</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </a>
            </td>
        </tr>
    </table>
</div>

CSS：

td div
{
    max-height: 100px;
    overflow-y: scroll;
}

关于jsfiddle的例子：http://jsfiddle.net/7t9qkLc0/3/

显示动态滚动条jquery

2 个答案: