How do I prevent a table from extending past its containers height

user_11520912 0
Viewed 27

I have a table and whenever there are too many rows it goes off the bottom of the page and exceeds its containers height. enter image description here

<body>
  <div class="myContainer">
    <table class="scrolldown">

      <!-- Table head content -->
      <thead class="test1">
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
        </tr>
      </thead>

      <!-- Table body content -->
      <tbody class="test2">
        <tr>
          <td>Content</td>
          <td>Content</td>
        </tr>...
      </tbody>
    </table>
  </div>
<body>

CSS

.myContainer {
  outline-style: solid;
  outline-color: #c7d2fe;
  height: 100px
}
tbody td,
thead th {
  width: 200px;
  border-right: 2px solid black;
}
td {
  text-align: center;
}

How can I make it so that the table becomes scrollable once it would extend past its containers height?

Fiddle

html-table css html
1 Answers

You can do this by adding overflow: auto; to the wrapper div .myContainer.

This will add a scrollbar to the container when the table is taller.

Fiddle

mrinject_150000
Related