Matthew Matthew - 1 month ago 6
CSS Question

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

I'm trying to make a cell table with only HTML + CSS, and have done an alright job I'm happy with except for the clickability. Only the link was clickable, so when I went into the CSS to change the display to block and the width to 100%, my proportions went wacko and it didn't work like it should have. How would I go about fixing this?



<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

You can use a pseudo-element with absolute positioning so that it will span to the whole cell's area (just remember to set td {position: relative}). That way the link will be taking the whole space, but the sole content of it (i.e. text etc.) won't get messed up:

(I've set the semi-transparent red background on the pseudo-element so it's better visible what's going on. In your final code just leave the background: rgba(255, 0, 0, 0.2); out)

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>