Html 如何缩小表格单元格以适应内容高度？

我已经尝试过这个网站提供的一些解决方案，但显然，它们都不适合我。所以我想我应该把这当作另一个问题来发帖

我有一个包含我用CSS设计的按钮的表格

我没有设置桌子的高度和宽度，所以它应该根据内容自行调整。问题是按钮下面有一个“间隙”，从图中可以看出，我似乎找不到办法来消除这个。我也尝试过设置每个单元格的高度，但没有效果

我有这个按钮

.arrow
{
background-color:#78E9DE;
box-shadow: 0px 4px 0px 0px #45C3B8;
border-radius: 5px;
color: white;
border: none;
font-size: 30px;
};

和一个简单的html表

<table>
<tr>
  <td></td>
  <td>[up button here]</td>
  <td></td>
</tr>
<tr>
  <td>[left button here]</td>
  <td></td>
  <td>[right button here]</td>
</tr>
<tr>
  <td></td>
  <td>[down button here]</td>
  <td></td>
</tr>
</table>

[此处向上按钮]
[此处左键]
[右键此处]
[此处按下按钮]

我想让每一个单元格都有里面的内容，这样看起来就更漂亮，更容易点击。请帮忙，谢谢。

试试这个：

表格{
边界塌陷：塌陷；
}
表，td{
填充：0；
}
img{
显示：继承；
}

Try setting

table>tr，table>tr>td{line height:1；}

我试过了，但什么也没发生：（你试过使用

高度：100%

？我试过了，但它只缩小了至少一个像素。不过谢谢你的建议。我可以再给它拍一次按钮的图像吗？我没有为按钮使用图像。我使用CSS。