为什么 <a> 没有填满 <td> 但它的宽度和高度为 100%

Question

我有一个问题，我想要一个带链接的 table。我有一个 as child 来自这样的标签：

<table>
    <tr>
        <td><a href="https://app.netlify.com/sites/controllpanel-chraebsli/overview">Controllpanel</a></td>
        <td><a href="https://app.netlify.com/sites/controllpanel-chraebsli/deploys"><img src="https://api.netlify.com/api/v1/badges/db717d14-d6ee-42c3-ae0e-3eb748d705aa/deploy-status"alt="Netlify Status"></a></td>
    </tr>
</table>

现在我希望第一个填充我尝试过的：

a {
    text-decoration: none;
    color: #000;
    width: 100%;
    height: 100%;
}

那应该填还是不填？在下图中，您可以看到只有文本 (1) 的大小。但是您还可以看到它具有我提到的 (3) 中的 CSS，并且是 (2) 中的 child。

那为什么 >a> 没有填满？以及如何填充与大小相同的填充？

Answer 1

锚标签默认为 inline elements。将它们设置为 display: block，您的问题就解决了！

Answer 2

原因是<a>标签默认显示为display: inline，不响应宽高CSS；您必须将其更改为 display: inline-block 才行。

此外，如果您的 table 单元格有填充，并且您希望 <a> 完全填充它，请删除单元格的填充或对锚点应用等于填充的负边距单元格。

为什么 <a> 没有填满 <td> 但它的宽度和高度为 100%

Why doesn't <a> fill up <td> but it has width and height on 100%

html

css

html-table