I'd like to scroll a div element inside a TD with colspan.
I'm building a page that needs to be scrollable inside a table after expanded
See demo: https://jsfiddle.net/alexalannunes/yo4xdLez/6/
* {
box-sizing: border-box;
}
html {
font-family: sans-serif
}
.directive-scrollable {
display: flex;
border: 1px solid #ccc;
}
.directive-scrollable__scroll {
flex: 1;
display: flex;
overflow-x: auto;
}
.directive-scrollable__scroll__item {
border-right: 1px solid #ccc;
padding: 3px 8px;
width: 240px;
}
table {
text-align: left;
margin-top: 1rem;
border: 1px solid #ccc;
}
table th, table td {
border: 1px solid #ccc;
}
table td[colspan]{
padding: 1rem;
}<h4>
Out of table
</h4>
<h4>
Inside table
</h4>
<table>
<thead>
<th>column1</th>
<th>column2</th>
</thead>
<tbody>
<tr>
<td>one day</td>
<td>one more</td>
</tr>
<tr>
<td colspan="2">
<h5>
Here.. Why doesn't scroll
</h5>
<div class="directive-scrollable">
<div class="directive-scrollable__scroll">
<div class="directive-scrollable__scroll__item">1</div>
<div class="directive-scrollable__scroll__item">1</div>
<div class="directive-scrollable__scroll__item">1</div>
<div class="directive-scrollable__scroll__item">1</div>
<div class="directive-scrollable__scroll__item">1</div>
<div class="directive-scrollable__scroll__item">1</div>
</div>
<div class="action">
<button>boa</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>Note that out of the table works perfetly. But inside table not. I have to cut some lines of code 'case stackoverflow say me that there are many code!
Please click on link to see the demo! https://jsfiddle.net/alexalannunes/yo4xdLez/6/
Thanks