display dynamic scrollbar jquery

Question

I have a requirement where i have created a table and inside row of table created another table. Requirement is to not to increase the height of the inner table whenever new elements are added inside the inner table, rather it has to display the scrollbar when new data is added inside the inner table (with class=newTable) and inner table height seems to increase. Please suggest how to dynamically show the scrollbar inside the inner table (class=newTable) whenever more data is added inside the table and table height seems to increase. Thanks.

--EDIT--

Please find the fiddle http://jsfiddle.net/7t9qkLc0/4/ . how can i hide the scrollbar icon if the data is limited in the table and show the scrollbar only if data is more and table height seems to increase. I tried using css overflow:hidden but that didn't gave the result.

Vall3y · Accepted Answer · 2014-11-22 17:35:39Z

3

I didn't use your code sample. I wrote an exaxmple of my own, is this what you wanted to do?

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

The trick is to set a height for the row, set overflow to scroll, and the display to inline-block.

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

answered Nov 22, 2014 at 17:35

Vall3y

1,1818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eran.E · Accepted Answer · 2014-11-22 19:44:22Z

if i get you right, and you want to have a scroll bar when new elements are getting inside the "newTable" class table, you can wrap this table with a div (inside the td) and make it scroll when it gets specific height (100 'px' in this example, but change it to what you need), i have used max-height so it will not get the height when it's not needs to. i've put a button in the jsfiddle example for increase the elements so you can see what's happening when more elements are getting inside the "newTable" class table.

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;
}

example on jsfiddle: http://jsfiddle.net/7t9qkLc0/3/

If the data is limited in the inner table how can i hide the scrollbar, scrollbar should only be shown if data exceeds the table height. Please see the fiddle jsfiddle.net/7t9qkLc0/4 in which the data is limited but still we were able to see the scrollbar image in the inner table. @Eran.

Collectives™ on Stack Overflow

display dynamic scrollbar jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related