关于 html：如何在 css 中使表格的整行可点击？-前端开发

How do I make an entire row of a table clickable in css?如果我有以下代码，我会添加什么来使一行作为链接可点击？ (温和点，我是新手)我已经尝试了几件事...

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

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

相关讨论

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

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

1
2
3

a {
display: block;
}

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

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

使用非标准字体

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

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

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

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

您将在下面找到外观相同的导航框，而无需使用 html 表格。这段代码可以被认为更干净。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.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:"a–oa–o";
float: right;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ul class="nav">

<li>
CENTER FOR MATHEMATICAL & COMPUTATIONAL MODELING IN BIOLOGY & MEDICINE
</li>

<li>
OUR PEOPLE - COMMITTEES
</li>

<li>
SEMINARS, COLLOQUIUM, CONFERENCES & RESEARCH
</li>

</ul>

带表的原始解决方案

如果您出于某种原因更喜欢表格解决方案，请在此处找到固定代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

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

基础教程推荐