How to make horizontal overflow for table inside a div?

Issue

I am trying to bring the scroll bar to bottom so that all tables should display when I scroll horizontally. I tried many steps but not able to achieve it.

Here is the code - JSFiddle

I have tried following code but not able to achieve it.

overflow-x: auto;
white-space: nowrap;

Here is an image what I want to achieve.

<div style="width: 750px; height: 321px; overflow-x: auto;">
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
</div>

Solution

I removed nearly all your inline-style and re-added them as css-style. This makes the code way shorter and easier.

you have 5 tables within your div-wrapper. Each table has a width of 200px. So you need to enlarge the wrapping div width to 1000px. 750px would not allow to contain 5 tables with 200px each. You are missing 250px width. This causes 2 of the tables to drop down below the first 3 tables.

Last but not least, I gave the tables the property: box-sizing: border box;. That way you dont have to calculate the paddings and border thickness. Otherwise you would need a wrappign div width of 1010px to take the 5x left + right borders with 1px each into account.

.table-wrapper {
  min-width: 1000px;
  overflow-x: auto;
  box-sizing: border-box;
}

.table-wrapper * {
  box-sizing: border-box;
}

th {
  width: 200px;
  height: 85px;
  text-align: center;
}

td {
  height: 24px;
}

<div style="width: 750px; overflow-x: auto;">
  <div class="table-wrapper">
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answered By - tacoshy