在 CSS 中将显示设置为 TD 块以使单元格可点击时，它们的大小会发生可怕的调整/HTML - CSS

Question

我正在尝试制作一个只有 HTML + CSS 的单元格 table，并且做得很好，除了可点击性，我很满意。只有 link 是可点击的，所以当我进入 CSS 将显示更改为块并将宽度更改为 100% 时，我的比例变得很奇怪，它没有像应该的那样工作。我将如何解决这个问题？

<style type="text/css">
/*<![CDATA[*/
td:hover {
background: #c2ceb5;
}
/*]]>*/
    
td a {
    display: block;
        width: 100%;
        height: 100%;
}
    
</style>

#HTML -#

<table align="" style="border: 0px solid #ffffff; background-color: #5e913f;" class="mceEditable" border="1" cellpadding="5" cellspacing="0" height="277" width="1060">
<tbody>
<tr>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px; height: 50px;"><a class="" title="Motorcycles" href="/app/sdfb0ab666d755ac0/pb951b66bb569142b/"><span style="color: #ffffff;">Motorcycles</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px; height: 50px;"><a class="" title="Compacts" href="/app/sdfb0ab666d755ac0/p6b71aa99c4644cd3/"><span style="color: #ffffff;">Compacts</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px; height: 50px;"><a class="" title="Coupes" href="/app/sdfb0ab666d755ac0/p6910e9886b0d0a84/"><span style="color: #ffffff;">Coupes</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;"><a class="" title="Sedans" href="/app/sdfb0ab666d755ac0/p04487d08f78ab32f/"><span style="color: #ffffff;">Sedans</span></a></td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Sports" href="/app/sdfb0ab666d755ac0/p2309313bdad3caca/"><span style="color: #ffffff;">Sports</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Sports Classics" href="/app/sdfb0ab666d755ac0/pfdf6e03bcaf0041a/"><span style="color: #ffffff;">Sports Classics</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Super" href="/app/sdfb0ab666d755ac0/p792868a4260dfc77/"><span style="color: #ffffff;">Super</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; height: 50px;"><a class="" title="Muscle" href="/app/sdfb0ab666d755ac0/pb6ced3f8242bb598/"><span style="color: #ffffff;">Muscle</span></a></td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Off-Road" href="/app/sdfb0ab666d755ac0/pc08e3cf76c44bace/"><span style="color: #ffffff;">Off-Road</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; height: 50px;"><a class="" title="SUVs" href="/app/sdfb0ab666d755ac0/p27252c4e66b73e8c/"><span style="color: #ffffff;">SUVs</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Vans" href="/app/sdfb0ab666d755ac0/p50a19d54db1172f4/"><span style="color: #ffffff;">Vans</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Industrial" href="/app/sdfb0ab666d755ac0/pda5c3f1364fe4017/"><span style="color: #ffffff;">Industrial</span></a></td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Commercials" href="/app/sdfb0ab666d755ac0/p7447d89331c6609b/"><span style="color: #ffffff;">Commercial</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; height: 50px;"><a class="" title="Utility" href="/app/sdfb0ab666d755ac0/p95dac2582026e810/"><span style="color: #ffffff;">Utility</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Emergency" href="/app/sdfb0ab666d755ac0/p88e7120effd6ec2d/"><span style="color: #ffffff;">Emergency</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Service" href="/app/sdfb0ab666d755ac0/pe1b688a7fc1a8110/"><span style="color: #ffffff;">Service</span></a></td>
</tr>
</tbody>
</table>
<p><span style="color: #ffffff;">&nbsp;</span></p>

Answer 1

您可以使用带有 absolute 定位的伪元素，这样它就会跨越整个单元格区域（请记住设置 td {position: relative}）。这样 link 将占用整个 space，但它的唯一内容（即文本等）不会被弄乱：

(我在伪元素上设置了半透明的红色背景，这样可以更好地看到发生了什么。在你的最终代码只留下 background: rgba(255, 0, 0, 0.2); ）

td a {
  display: block;
  width: 100%;
}
td {
  position: relative;
}
td a:before {
  content: "";
  position: absolute;
  background: rgba(255, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

  <table align="" style="border: 0px solid #ffffff; background-color: #5e913f;" class="mceEditable" border="1" cellpadding="5" cellspacing="0" height="277" width="1060">
<tbody>
<tr>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px; height: 50px;"><a class="" title="Motorcycles" href="/app/sdfb0ab666d755ac0/pb951b66bb569142b/"><span style="color: #ffffff;">Motorcycles</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px; height: 50px;"><a class="" title="Compacts" href="/app/sdfb0ab666d755ac0/p6b71aa99c4644cd3/"><span style="color: #ffffff;">Compacts</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px; height: 50px;"><a class="" title="Coupes" href="/app/sdfb0ab666d755ac0/p6910e9886b0d0a84/"><span style="color: #ffffff;">Coupes</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; width: 250px;"><a class="" title="Sedans" href="/app/sdfb0ab666d755ac0/p04487d08f78ab32f/"><span style="color: #ffffff;">Sedans</span></a></td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Sports" href="/app/sdfb0ab666d755ac0/p2309313bdad3caca/"><span style="color: #ffffff;">Sports</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Sports Classics" href="/app/sdfb0ab666d755ac0/pfdf6e03bcaf0041a/"><span style="color: #ffffff;">Sports Classics</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Super" href="/app/sdfb0ab666d755ac0/p792868a4260dfc77/"><span style="color: #ffffff;">Super</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; height: 50px;"><a class="" title="Muscle" href="/app/sdfb0ab666d755ac0/pb6ced3f8242bb598/"><span style="color: #ffffff;">Muscle</span></a></td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Off-Road" href="/app/sdfb0ab666d755ac0/pc08e3cf76c44bace/"><span style="color: #ffffff;">Off-Road</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; height: 50px;"><a class="" title="SUVs" href="/app/sdfb0ab666d755ac0/p27252c4e66b73e8c/"><span style="color: #ffffff;">SUVs</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Vans" href="/app/sdfb0ab666d755ac0/p50a19d54db1172f4/"><span style="color: #ffffff;">Vans</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Industrial" href="/app/sdfb0ab666d755ac0/pda5c3f1364fe4017/"><span style="color: #ffffff;">Industrial</span></a></td>
</tr>
<tr>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Commercials" href="/app/sdfb0ab666d755ac0/p7447d89331c6609b/"><span style="color: #ffffff;">Commercial</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff; height: 50px;"><a class="" title="Utility" href="/app/sdfb0ab666d755ac0/p95dac2582026e810/"><span style="color: #ffffff;">Utility</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Emergency" href="/app/sdfb0ab666d755ac0/p88e7120effd6ec2d/"><span style="color: #ffffff;">Emergency</span></a></td>
<td style="text-align: center; border: 5px solid #ffffff;"><a class="" title="Service" href="/app/sdfb0ab666d755ac0/pe1b688a7fc1a8110/"><span style="color: #ffffff;">Service</span></a></td>
</tr>
</tbody>
</table>

在 CSS 中将显示设置为 TD 块以使单元格可点击时，它们的大小会发生可怕的调整/HTML - CSS

When setting display to block of TD in CSS to make cell clickable, they get horribly resized / HTML - CSS

html

css

html-table

cell