gpt4 book ai didi

html - 使 "empty"单元格在 HTML 表格中可点击

转载 作者:行者123 更新时间:2023-11-28 04:04:50 25 4
gpt4 key购买 nike

我想让 HTML 表格的所有单元格都可以点击——也就是说,来自 anchor 标记的链接是事件的——从单元格内的任何点。问题是单元格没有内容。我们只是使用 HTML 表格通过为每个单元格的背景着色来直观地表示数量。包含 anchor 标记的单元格,但 anchor 标记之间没有内容。

下面是三个表格的例子。在第一个表中,没有定义单元格的维度。在第二个表中,定义了最小尺寸。在第三个表中,宽度和高度是明确定义的。在每个表的第一行的第一个单元格中是一个简单的句点字符。请注意,在第一个和第二个表格中,只有该单元格是可单击的。我们希望避免显式设置高度和宽度,因此如果我们可以修改前两个表中的任何一个以匹配第三个表的可点击行为,那就太棒了。我们可以在 anchor 标记中放置一个不间断空格 ( ),但是还有其他更优雅的解决方案吗?

<html>
<head>
<style>
td.min {min-width: 1px; min-height: 1px;}
td.defined {width: 50px; height: 50px;}
td a.fullcell {width: 100%; height: 100%; display: block;}
</style>
</head>
<body>
<h1>No dimension defined</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td>B</td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Min-dimension defined</h1>
<table border="1">
<tr>
<td class="min">1</td>
<td class="min">2</td>
<td class="min">3</td>
</tr>
<tr>
<td class="min">A</td>
<td class="min" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="min">B</td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="min" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Dimensions defined</h1>
<table border="1">
<tr>
<td class="defined">1</td>
<td class="defined">2</td>
<td class="defined">3</td>
</tr>
<tr>
<td class="defined">A</td>
<td class="defined" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="defined">B</td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="defined" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
</body>
</html>

最佳答案

CSS:

table { empty-cells: show; }

但那是 not supported in IE .   仍然是向后兼容的最佳选择。

关于html - 使 "empty"单元格在 HTML 表格中可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1117178/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com