How to put Scroll in table inside div with width 100%?

Question

The example shows a div with scroll horizontally, but would like the table along with the scroll div to adjust 100% to the screen size.

.div {
  border: solid;
  display: inline-block;
  width: 300px;
  overflow: auto;
}
.tablefull td{
    border: solid;
}
.table th{
    border: solid;
  }
.table td {
  padding: 10px;
}

<table class="tablefull">
  <tr>
    <td colspan="2">header</td>
  </tr>

  <tr>
    <td>MENU
    </td>
    <td class="">
      <div class="div">
        <table>
          <thead>
            <tr>
              <th>Desc0</th>
              <th>Desc1</th>
              <th>Desc2</th>
              <th>Desc3</th>
              <th>Desc4</th>
              <th>Desc5</th>
              <th>Desc6</th>
              <th>Desc7</th>
              <th>Desc8</th>
              <th>Desc9</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
                        <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
                        <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">footer</td>
  </tr>
</table>

Answer 1

First of all, a warning: I didn’t solve just by touching the point you asked, I re-structured the HTML as a solution to the problem as a whole.

Basically, I removed the table from outside, after all, it’s a layout and not a truth table. The inside kept, because semantically it is correct <table>, because they are tabular data.

Important points:

• We define position:relative in Divs, so things like the menu can use 100% height over the div Dad, not the whole page;

• to get the menu and the table of the same height, a div extra (body); that allowed us to set the menu height;

• was used box-sizing:border-box so that the measurements include the edges, avoiding "bursting" of layout;

• so that the container If the table keeps 100% wide, we create a left margin where the menu fits, but we do not define width (so the div automatically occupies the remaining space. With 100% the result would not be the desired, because CSS is full of oddities);

• as the menu had fixed width, we used the position:Absolute, so the div of the table stand side by side with the menu (using the margin as a ruse not to "encavalate" the two things);

• the final touch was the overflow:auto in div which contains the table, so that the scrollbar appears when necessary.

div { box-sizing: border-box; position: relative; }

.header,.footer,.body { width: 100%; }
.header,.footer,.menu,.table { border: 2px solid #000; }
.body { margin:4px 0; }
.menu { position:absolute; width:100px; height:100%; }
.table { margin-left:104px; overflow:auto; }
td,th {border:2px solid #000}

<div class="header">Header</div>
<div class="body">
  <div class="menu">Menu</div>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>Desc0</th>
          <th>Desc1</th>
          <th>Desc2</th>
          <th>Desc3</th>
          <th>Desc4</th>
          <th>Desc5</th>
          <th>Desc6</th>
          <th>Desc7</th>
          <th>Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8</th>
          <th>Desc9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="footer">Footer</div>