如何在css中使整个表格可以点击？

Question

如果我有以下代码，我会添加什么来使一行可点击作为链接？ （要温柔我是新手）我尝试了几件事，但我对此很新，所以我很难做到正确：

 .hoverTable { width: 700px; border-collapse: collapse; } .hoverTable td { padding: 7px; border: #315795 1px solid; font-family: "tradegothic"; font-size: 14px; color: #315795; } /* Define the default color for all the table rows */ .hoverTable tr { background: #bec7d6; } /* Define the hover highlight color for the table row */ .hoverTable tr:hover { background-color: #315795; color: #ffffff; } /* Define the hover highlight color for the table row */ .hoverTable td:hover { background-color: #315795; color: #ffffff; } 

 <table class="hoverTable" style="width: 700px;"> <tbody> <tr class="clickable-row" data-href="mathdept.ucr.edu"> <td colspan="3"><strong><a>CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td> </tr> <tr> <td colspan="3"><strong>OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></strong></td> </tr> <tr> <td colspan="3"><strong>SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH <span style="float: right;">►►</span></strong></td> </tr> </tbody> </table> 

Answer 1

如果我理解正确你需要创建像我上传的图片中的东西：

为了创建你需要把href =“信息”放在标签内：

enter code here

<tr class="clickable-row">
<td colspan="3"><strong><a href="/mathdept.ucr.edu">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a><br /></strong></td>
</tr>

Answer 2

HTML有两种基本类型的元素，内联元素和块元素。 如果您想了解更多信息， 请阅读此处 。

因为它们<a>标签属于内联元素的类，所以它不会填充整个表格单元格。 诀窍是将带有链接的anker标记转换为块元素：

a {
  display: block;
}

现在anker将填满整个单元格。 您将在下面找到有关此解决方案如何工作的代码示例。

---

作为初学者，我有两个额外的建议：

使用非标准字体

如果您使用的是像tradegothic这样没有安装所有计算机的不tradegothic字体，请注意。 如果网站的访问者没有在他的机器上安装此字体，他将以他的网络浏览器的默认字体看到您的网站。

如果您想使用自定义字体，请阅读此处 。

如果没有必要，请不要使用表格

使用表来显示导航或其他非表数据通常被认为是一种糟糕的代码风格 。

下面你会发现exakt相同的导航框而不使用html表。 这段代码可以被认为更干净。

 .nav { width: 700px; /* Define the width of the navigation box */ padding: 0; } .nav li { list-style-type: none; margin: -1px 0 0 0; } /* Define the style of the ankers */ .nav a, .nav a:visited { display: block; border: #315795 1px solid; padding: 7px; font-family: "tradegothic"; font-size: 14px; font-weight: bold; text-decoration: none; color: #315795; background: #bec7d6; } /* Define the hover style for the ankers */ .nav a:hover { background-color: #315795; color: #ffffff; } /* Define the Arrows */ .nav a::after { content: "►►"; float: right; } 

 <ul class="nav"> <li><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE</a></li> <li><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES</a></li> <li><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH</a></li> </ul> 

---

表的原始解决方案

如果您出于某种原因更喜欢表格解决方案，那么您将找到固定代码。

 .hoverTable { width: 700px; border-collapse: collapse; } .hoverTable td { padding: 0; border: #315795 1px solid; } /* Define the style for normal and visited links */ .hoverTable a, .hoverTable a:visited { display: block; padding: 7px; text-decoration: none; font-weight: bold; font-family: "tradegothic"; font-size: 14px; color: #315795; background: #bec7d6; } /* Define the hover style for the links */ .hoverTable a:hover { color: #ffffff; background: #315795; } 

 <table class="hoverTable"> <tbody> <tr class="clickable-row" data-href="mathdept.ucr.edu"> <td colspan="3"><a href="http://stackoverflow.com">CENTER FOR MATHEMATICAL &amp; COMPUTATIONAL MODELING IN BIOLOGY &amp; MEDICINE<span style="float: right;">►►</span></a></td> </tr> <tr> <td colspan="3"><a href="http://stackoverflow.com">OUR PEOPLE - COMMITTEES <span style="float: right;">►►</span></a></td> </tr> <tr> <td colspan="3"><a href="http://stackoverflow.com">SEMINARS, COLLOQUIUM, CONFERENCES &amp; RESEARCH <span style="float: right;">►►</span></a></td> </tr> </tbody> </table>