Mr.Easy Answers McFly Mr.Easy Answers McFly - 2 months ago 7
CSS Question

Table bigger than container with horizontal scroll

How can I make a table that is bigger than its parent container to have a horizontal scroll:



<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>





I need the table with a horizontal scroll.

Answer

use overflow: scroll; on the parent element:

.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>