顯示動態滾動條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/