Set Button height to 100% of parent element without setting parent height

I have a div that contains a button, a table and another button in that order, I want the buttons to be to the left and right of the table and have the same height as the table. The buttons are supposed to be back and forward buttons to change the data in the table.

I have gotten close to what I want using float: none on the div and float: left on all items, which aligns them correctly but when I try height: 100% on the buttons they expand on the entire window which is not what I want.

In quirks mode I can achieve something similar with

div {
    height: 50%;
}
    
button {
    height: 100%;
}
    
table {
    display: inline-block;
}

which worked in testing on accident because my screen size matched so it displayed like I wanted it to, this changed however as soon as I resized the window or added <!DOCTYPE html>.

Is there any way to accomplish this without using display: flex?

HTML:

<html>
<head>
    <meta charset="utf-8">
    <title>Under construction</title>
    <link rel="stylesheet" href="../css/stylesheet.css" />
</head>

<body>

<div>
    <button>&larr;</button>

    <table style="border: none">
    <thead><th>a</th><th>b</th><th>c</th></thead>
         <tbody>
             <tr><td>A</td><td>B</td><td>C</td></tr>
             <tr><td>D</td><td>E</td><td>F</td></tr>
             <tr><td>G</td><td>H</td><td>I</td></tr>
         </tbody>
    </table>

    <button>&rarr;</button>
</div>

</body>

</html>

CSS:

td {
    background: green;
    border-radius: 7px;
}

Solution

position:absolute seems to be the only solution here:

td {
  background: green;
  border-radius: 7px;
}
.box  {
  border:1px solid red;
  position:relative;
  display:inline-block;
  padding:0 50px; /* 50px is considered to be the width of button so adjust it based on your case*/ 
}
.box button {
  position:absolute;
  top:0;
  height:100%;
  left:0;
}
.box button:last-of-type {
  left:auto;
  right:0;
}

<div class="box">
  <button>&larr;</button>

  <table style="border: none">
    <thead>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </thead>
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
      </tr>
      <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
      </tr>
    </tbody>
  </table>

  <button>&rarr;</button>
</div>

Or you can consider another table structure but you will need to adjust the HTML code:

.box table td {
  background: green;
  border-radius: 7px;
}

.box {
  border: 1px solid red;
  border-spacing: 0;
}
.box,
.box > tbody,
.box > tbody > tr > td{
  height:100%;
}

.box button {
  height: 100%;
}

<table class="box">
  <tr>
    <td><button>&larr;</button></td>

    <td>
      <table style="border: none">
        <thead>
          <th>a</th>
          <th>b</th>
          <th>c</th>
        </thead>
        <tbody>
          <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
          </tr>
          <tr>
            <td>D</td>
            <td>E</td>
            <td>F</td>
          </tr>
          <tr>
            <td>G</td>
            <td>H</td>
            <td>I</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td><button>&rarr;</button></td>
  </tr>
</table>