I have 2 child div's and each will have a table inside that. Can we remove the Vertical scrollbar of the child elements.. Only Parent div should have a vertical scrollbar. Adding an image to understand it better. If there many rows then parent div is scrolled to view the data and horizontal scrollbar should be visible all the time..
Any help is appriciated Thank you
table,
th,
td {
border: 1px solid black;
}
.overflow-auto {
overflow-x: auto;
overflow-y: unset;
}
.display-flex {
display: flex
}
td,
th {
white-space: nowrap
}
th {
font-weight: bold;
}
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
}<div style="height:50%; background: #f5f5f5" class="display-flex overflow-auto">
<div style="width: 50%" class="overflow-auto child-1">
<table>
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr><tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
<div style="width: 50%" class="overflow-auto child-2">
<table>
<tr>
<th>
<div>First Name</div>
</th>
<th>
<div>Last name</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>City</div>
</th>
<th>
<div>country</div>
</th>
<th>
<div>Age</div>
</th>
<th>
<div>Date of Birth</div>
</th>
<th>
<div>Mothers Name</div>
</th>
<th>
<div>Fathers Name</div>
</th>
<th>
<div>No. Of Siblings</div>
</th>
</tr>
<tr>
<td>
<div>David</div>
</td>
<td>
<div>Smith</div>
</td>
<td>
<div>Goa</div>
</td>
<td>
<div>Ponda</div>
</td>
<td>
<div>India</div>
</td>
<td>
<div>29</div>
</td>
<td>
<div>23/09/1991</div>
</td>
<td>
<div>Jane Smith</div>
</td>
<td>
<div>Jade Smith</div>
</td>
<td>
<div>3</div>
</td>
</tr>
</table>
</div>
</div>from Remove vertical Scrollbar of children
No comments:
Post a Comment