我有一个div，它包含一个按钮、一个表和另一个按钮，按顺序排列，我希望按钮位于表的左侧和右侧，并且与表的高度相同。按钮应该是前后按钮，用于更改表中的数据。
在div上使用float: none，在所有项目上使用float: left，这使它们正确对齐，但当我在按钮上尝试height: 100%时，它们会在整个窗口上展开，这不是我想要的。
在怪癖模式下，我可以用实现类似的功能
div {
height: 50%;
}
button {
height: 100%;
}
table {
display: inline-block;
}
它在意外的测试中起到了作用，因为我的屏幕大小匹配，所以它显示得像我想要的那样，但当我调整窗口大小或添加<!DOCTYPE html>时，情况就发生了变化。
有没有什么方法可以在不使用display: flex的情况下实现这一点？
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Under construction</title>
<link rel="stylesheet" href="../css/stylesheet.css" />
</head>
<body>
<div>
<button>←</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>→</button>
</div>
</body>
</html>
CSS：
td {
background: green;
border-radius: 7px;
}
position:absolute似乎是这里唯一的解决方案：
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>←</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>→</button>
</div>或者，您可以考虑另一种表结构，但需要调整HTML代码：
.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>←</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>→</button></td>
</tr>
</table>