使"空"单元格在HTML表格中可单击

Question

使"空"单元格在HTML表格中可单击

我想让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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

cle*_*tus 6

CSS:

table { empty-cells: show; }

Run Code Online (Sandbox Code Playgroud)

但是在IE中不支持. 仍然是向后兼容性的最佳选择.

Answer 2

Chr*_*heD 5

你可以发现一个有趣的文章(部分)关于这个问题在这里.

我亲自去找 route:它触发相对连贯的行为(在不同的浏览器中),现在它很常用.

另一个问题是:你真的需要表格来布局(这是表格数据)吗？

归档时间：	16 年，9 月前
查看次数：	5006 次
最近记录：	6 年，9 月前