使 HTML 表格中的“空”单元格可点击答案

【问题标题】：Making "empty" cells clickable in HTML tables使 HTML 表格中的“空”单元格可点击
【发布时间】：2009-07-12 23:17:31
【问题描述】：

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

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

<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>

【问题讨论】：

标签： html css html-table

【解决方案1】：

CSS：

table { empty-cells: show; }

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

【讨论】：

很好地指出了正确的 CSS 以及兼容性问题。
对我来说，在 Firefox 3.0.11 上，这并没有提供使单元格可点击的请求行为。
好吧，如果没有对单元格执行某些操作的单击事件处理程序，则任何单元格都是可点击的（除了选择文本），但这似乎不是问题。
我刚刚编辑了我的帖子以包含我对“可点击”的定义，这不是 JavaScript 意义上的，而是锚标记（链接）意义上的。

【解决方案2】：

你可以找到一篇关于这个问题的有趣文章（部分）here。

我个人会选择路线：它会触发相对连贯的行为（在不同的浏览器中），并且现在很常用。

另一个问题是：您真的需要表格进行布局（这是表格数据）吗？

【讨论】：

是的，我想我们会去的路线我们有富集组的基因表达对比和值。对于每个对比和每个组，都有一个价值。但是，我们将这些值显示为颜色而不是文本。因此，表格既是也不是布局数据的正确方法。链接也不错。

【解决方案3】：

我喜欢这种方法：

<td style='cursor: pointer;' onclick='tdclick(event); return false;'></td>

然后是 JS

<script>
    tdclick(){
     //do something...
    }
</script>

【讨论】：