<div class="wrap">
  <table class="head">
    <tbody>
      <tr>
        <td>Head 1</td>
        <td>Head 2</td>
        <td>Head 3</td>
      </tr>
    </tbody>
  </table>
  <div class="scroll-table">
    <table>
      <tbody></tbody>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
      <tr>
        <td>Body 1</td>
        <td>Body 2</td>
        <td>Body 3</td>
      </tr>
    </table>
  </div>
</div>
.wrap {
  width: 400px;
}
.wrap table {
  table-layout: fixed;
  width: 100%;
}
.wrap table.head {
  width: calc(100% - 15px);
}
.wrap table.head tr td {
  background: #eee;
}

table tr td {
  border: 1px solid #eee;
  padding: 5px;
  word-wrap: break-word;
}

.scroll-table {
  height: 300px;
  overflow-y: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.