<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>
table {
	max-width:980px;
	table-layout:fixed;
	margin:auto;
}
th, td {
	padding:5px 10px;
	border:1px solid #000;
}
thead, tfoot {
	background:#f9f9f9;
	display:table;
	width:100%;
	width:calc(100% - 18px);
}
tbody {
	height:300px;
	overflow:auto;
	overflow-x:hidden;
	display:block;
	width:100%;
}
tbody tr {
	display:table;
	width:100%;
	table-layout:fixed;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.