html - making a parent div vertically scroll-able without changing the child divs height -
i have html table created using divs.
html code:
<div class = "content-table"> <div class = "table-row table-row1"> <div class = "left-align column1"> </div> <div class = "left-align column2">header</div> <div class = "left-align column3"> <span><strong>order activities</strong></span><br/> <table style="width:100%"> <tr> <th>act no</th> <th>type</th> <th>status</th> <th>required-by</th> </tr> <tr> <td>01</td> <td>d1pr01ag<br/> phonebooks (autogen) not com/can manually</td> <td><br/>act</td> <td><br/>15/06/16 17:00</td> </tr> <tr> <td>08</td> <td>jackson</td> <td>act</td> <td>20/06/16 17:00</td> </tr> </table> </div> </div> <div class = "table-row table-row2"> <div class = "left-align column1"> </div> <div class = "left-align column2"><strong>dap</strong><br/>224466/1</div> <div class = "left-align column3"> <span><strong>phonebooks (autogen) not com/can manually</strong></span><br/><br/> <table style="width:100%"> <tr> <td>act</td> <td>action<br/> table: jmina header: hc05c instr: first</td> <td>jmenhdc</td> <td>20/06/16 17:00</td> </tr> </table> </div> </div> <div class = "table-row table-row3"> <div class = "left-align column1">03-03-2016<br/>03:36:13</div> <div class = "left-align column2">image signature<br/>notes</div> <div class = "left-align column3"> <span><strong>engineer ein:</strong>607614772</span><br/> <span><strong>name:</strong>signed by: atish</span><br/> <span><strong>are able capture customer survey , signature?:</strong>yes </span><br/> <span><strong>did openreach engineer turn when said would?: </strong>yes</span><br/> <span><strong>did job needed ? (and if not, @ least explain why cpuldn't ?): </strong>yes</span><br/> </div> </div> <div class = "table-row table-row2"> <div class = "left-align column1"> </div> <div class = "left-align column2"><strong>dap</strong><br/>224466/1</div> <div class = "left-align column3"> <span><strong>phonebooks (autogen) not com/can manually</strong></span><br/><br/> <table style="width:100%"> <tr> <td>act</td> <td>action<br/> table: jmina header: hc05c instr: first</td> <td>jmenhdc</td> <td>20/06/16 17:00</td> </tr> </table> </div> </div> <div class = "table-row table-row3"> <div class = "left-align column1">03-03-2016<br/>03:36:13</div> <div class = "left-align column2">image signature<br/>notes</div> <div class = "left-align column3"> <span><strong>engineer ein:</strong>607614772</span><br/> <span><strong>name:</strong>signed by: atish</span><br/> <span><strong>are able capture customer survey , signature?:</strong>yes </span><br/> <span><strong>did openreach engineer turn when said would?: </strong>yes</span><br/> <span><strong>did job needed ? (and if not, @ least explain why cpuldn't ?): </strong>yes</span><br/> </div> </div> </div>
here each table-row doesn't have fixed height. so, want make content-table
class vertically scroll-able.
css
.content-table { overflow-y: scroll; height: 437px; }
when add above styles content-table
class each table row height become 437px. want make content-table
class vertically scroll-able without changing table-row
height.
how fix issue?
edit: table-row css
.table-row { width: 100%; height: 100%; display: inline-block; font-size: 13px; }
just modify class in css .content-table table-row below
.table-row { overflow-y: scroll; height: 437px; }
Comments
Post a Comment