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">&nbsp;</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">&nbsp;</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">&nbsp;</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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -