如何在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

HTML 有两种基本类型的元素，内联元素和块元素。 如果您想了解更多信息，只需read here。

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

a {
  display: block;
}

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

---

对于初学者，我有两个额外的建议：

使用非标准字体

如果您使用不常见的字体，例如tradegothic，请注意，这些字体并非在所有计算机上都安装。如果网站的访问者没有在他的机器上安装此字体，他将在其网络浏览器的默认字体中看到您的网站。

如果您想使用自定义字体，请read here。

非必要时不要使用表格

使用表格显示导航或其他非表格数据是mostly considered as a bad style of code。

您将在下面找到外观相同的导航框，而无需使用 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>

Answer 2

如果我理解正确，您需要在我上传的图片中创建类似的内容：

为了创建，您需要将 href="information" 放在标签内：

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>