如何实现表格单元格铺满背景色且内部文本为超链接

安全阿岳

2026-10-7

解决方案

方案1：直接给设置背景色（推荐）

这个方案完全符合你的需求：单元格全铺背景色，仅文本为可点击超链接，不需要调整超链接样式。
你之前把score类加到<td>上没有背景色，是Bootstrap表格的默认样式优先级冲突导致，调整写法即可解决：

HTML结构调整，将score类绑定到需要上色的<td>标签上：

<td class="score"><a href="#">cell text</a></td>
<td><a href="#">cell text</a></td>
<td class="score"><a href="#">cell text</a></td>

调整JS写法，强制背景色生效，避免被Bootstrap样式覆盖：

var colorScore = document.getElementsByClassName('score');
for (i=0; i < colorScore.length; i++) {
  colorScore[i].style.setProperty('background-color', 'red', 'important');
}

方案2：让标签撑满单元格

如果希望样式绑定在<a>标签上，可以通过CSS让<a>撑满整个单元格，不过这个方案会让整个单元格都变成可点击区域，不符合你的需求可以忽略：

新增自定义CSS：

/* 去掉单元格默认内边距 */
td {
  padding: 0;
}
/* 让a标签撑满父元素，保留原本文本的内边距 */
a.score {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5rem; /* 对应Bootstrap 5表格默认的单元格内边距 */
}