Question

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

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

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

Answer 1

CSS：

table { empty-cells: show; }

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

Answer 2

您可以（部分）找到有关此问题的有趣文章here。

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

另一个问题是：你真的需要用于布局的表格（这是表格数据）吗？

Answer 3

我喜欢这种方法：

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

然后是JS

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

使“空”单元格在HTML表格中可单击

3 个答案: