I have a table in my project with many columns, so I need to use x overflow to scroll all its contents. My problem is that below the table, I have a footer that needs to be the same width as the table, and when the table has x overflow "enabled", the footer does not "stretch" to be the same width as the table. See the problem in the gif below
I'm working with angular, so I'm using html and scss:
<body><section class="test-table"><table class="test-table__content"><thead><tr><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th><th scope="col">Test</th></tr></thead><tbody><tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr></tbody></table><footer>HERE IS MY PROBLEM - THIS FOOTER MUST HAVE THE SAME WIDTH OF THE TABLE</footer> </section></body>.test-table { overflow-x: scroll;&__content { width: 100%;& thead th { background-color: #FFFFFFB3; font-size: 1.1rem; color: #39CDDB; }& tbody {& td { text-align: center; min-width: 6rem; }& tr:nth-child(even) { background-color: #FFFFFFB3; }& tr:nth-child(odd) { background-color: #4D4F5333; td { border-right: 1px solid gray; } } } } footer { display: flex; flex: 1; flex-grow: 1; flex-shrink: 1; background-color: red; color: yellow; }}