为何设置width、height为100%的<a>标签无法填满父级<td>元素

a标签默认是行内元素（inline），该类型元素的宽高属性默认不会生效，尺寸只会由内部文本/内容的大小决定，因此你设置的width: 100%、height: 100%虽然能在调试工具中看到已加载，但实际不会触发渲染效果。

提供两种适配性较好的实现方案：

方案1：转换a为块级元素适配 #

给父级td设置明确高度，同时修改a标签的display属性：

td {
  /* 按需设置单元格高度即可 */
  height: 40px;
  padding: 0;
}
a {
  text-decoration: none;
  color: #000;
  display: block; /* 转为块级元素后宽高属性才会生效 */
  width: 100%;
  height: 100%;
  /* 按需添加，实现文本垂直居中，行高和td高度保持一致即可 */
  line-height: 40px;
  padding: 0 8px;
}

方案2：绝对定位适配（无需手动设置高度） #

通过定位规则让a自动铺满整个td，适配td的动态高度场景：

td {
  position: relative;
  padding: 0;
}
a {
  text-decoration: none;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 按需添加，实现文本水平垂直居中 */
  display: flex;
  align-items: center;
  padding: 0 8px;
}

内容的提问来源于stack exchange，提问作者chraebsli