显示动态滚动条jquery

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：http://jsfiddle.net/7t9qkLc0/3/