Таблицы больше, чем контейнер с горизонтальной прокруткой

Question

Как я могу сделать таблицу, которая больше, чем его родительского контейнер, чтобы иметь горизонтальную прокрутку:

<div style="background: pink; width: 200px"> 
 
    <table style="background: rgba(2,2,2, 0.2); width: 500px"> 
 
    <thead> 
 
     <th>th</th> 
 
     <th>th</th> 
 
    </thead> 
 
    <tbody> 
 
     <td>cell</td> 
 
     <td>cell</td> 
 
    </tbody> 
 
    </table> 
 
</div>

Мне нужна стол с горизонтальная прокрутка.

Answer 1

использование overflow: scroll; на родительский элемент:

.table-container { 
 
    background: pink; 
 
    width: 200px; 
 
    overflow-x: scroll; 
 
} 
 
.table { 
 
    background: rgba(2,2,2, 0.2); 
 
    width: 500px; 
 
}

<div class="table-container"> 
 
    <table class="table"> 
 
    <thead> 
 
     <th>th</th> 
 
     <th>th</th> 
 
    </thead> 
 
    <tbody> 
 
     <td>cell</td> 
 
     <td>cell</td> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

Попробуйте добавить к родительскому объекту overflow-x: auto или overflow-x: scroll.

<div style="background: pink; width: 200px; overflow-x: auto;"> 
 
    <table style="background: rgba(2,2,2, 0.2); width: 500px"> 
 
    <thead> 
 
     <th>th</th> 
 
     <th>th</th> 
 
    </thead> 
 
    <tbody> 
 
     <td>cell</td> 
 
     <td>cell</td> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 3

<div style="background: pink; width: 200px; overflow: scroll"> 
 
    <table style="background: rgba(2,2,2, 0.2); width: 500px"> 
 
    <thead> 
 
     <th>th</th> 
 
     <th>th</th> 
 
    </thead> 
 
    <tbody> 
 
     <td>cell</td> 
 
     <td>cell</td> 
 
    </tbody> 
 
    </table> 
 
</div>