I make a sign in which the header and line numbering should be fixed and always visible when scrolling content, while it is necessary that the label itself is dynamically adjusted to the block allocated to it, and in the header and row numbering column there is no scrolling.

There are no problems with the header, I put the parent overflow: auto; , in the child, to hide the scrolling overflow: hidden; and the element fits normally into the block allocated to it, the invisible part hides, but such a trick does not roll with a column of numbers. If we do not put the child overflow: hidden; , then everything seems fine, but we see scrolling (which needs to be hidden), and if we set overflow: hidden , then the parent is equal in height to the content, I can’t beat it all day.

Sample code (javascript scroll code removed to avoid clutter): jsFiddle

 <style type="text/css"> td { border: 1px solid black; } .lframe { width: 100%; height: 100%; table-layout: fixed; } .lframe_content { width: 100%; height: 100%; overflow: auto; } </style> <div style="width: 400px; height: 250px;"> <table style="width: 100%; height: 100%;"><tr><td> <div style="width: 50px; height: 50px;"></div> </td><td> <table class="lframe"><tr><td> <div class="lframe_content" style="overflow: hidden;"> <table style="position: relative;"><tr> <td>000001</td> <td>000002</td> <td>000003</td> <td>000004</td> <td>000005</td> <td>000006</td> </tr></table> </div> </td></tr></table> </td></tr><tr><td> <table class="lframe"><tr><td> <div class="lframe_content"> <table style="position: relative;"> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> <tr><td>9</td></tr> <tr><td>10</td></tr> </table> </div> </td></tr></table> </td><td style="width: 100%; height: 100%;"> cells </td></tr></table>

    2 answers 2

    It will work if you set a fix. the height of the required block with the class lframe_content : Example

    • The fact of the matter is that you want a dynamic layout, horizontally, it works fine. In general, I managed to achieve the desired effect with a crutch, indicating a small height lframe_content, and then it stretches along the height of the parent normally. - tuxnsk

    Pull the header lines and columns out of the table with position:absolute . In addition, the table will have to be wrapped in 2 additional divs, from the external one you should put position:relative and paddings by the size of the header areas. You can do with a single wrapper div, but then you have to set the display:block table .

    Well, yes, all this will work out only if the width and height of the removed cells is known, or the table has no visible borders and hover-effects.