Html 如何使桌子适应收割台的最大高度？

我正在开发cordova应用程序，但我遇到了数据角色样式的问题：header div。我希望header的最大大小为屏幕的10%。我可以做到这一点，但无法适应我在div内的表格。它超出了div的大小，如下图所示：

如您所见，我使用了表的边框来查看表占用的空间，下面是html代码：

<div data-role="header" data-position="fixed" style="background-color:#1e0354; max-height:8%;">
    <table style="width:100%; margin-top:0px ;margin-bottom:0px; max-height:8%; border: 3px solid white;">
        <tr>
            <td style="text-align:left;width:33%;max-height:4%;vertical-align:middle;">
              <a href="#frontPage" id="hiddenForHeight" style="visibility: none; margin-left:3px;">
                <img src="img/SaioaItxi.png" width="20%" height="8%">
              </a>
            </td>
            <td style="text-align:center;width:33%;max-height:4%;">
              <h4 style="margin-left:0;margin-right:0;white-space: nowrap;overflow: visible; color:white; ">Orrialde printzipala</h4>
            </td>
            <td></td>
        </tr>
    </table>
</div>

奥里亚德普林齐帕拉酒店

---

有人知道这个问题的解决办法吗？我不明白为什么当表中的元素较小时，表会如此大…

可能您的css会因为冒号

边距顶部之间的空间而中断：0px另一件要补充的事情是主题的一半：不要起诉一张桌子来设计它的样式。与使用FlexBox或css网格相比，它不仅复杂，而且更复杂。