mod_autoindex HTML模板问题：实现文件名所在整行点击跳转

要让名称列的整个单元格区域（包括空白处）都能触发跳转，核心是让点击区域覆盖整个单元格，以下是两种可靠方案：

方案一：CSS 扩展 a 标签覆盖单元格 #

默认情况下 <a> 标签只包裹文件名文本，通过 CSS 绝对定位让 <a> 标签填满整个单元格：

1. 给名称列的 <td> 设置相对定位：

td.name-column { /* 替换成你实际的名称列td类名或选择器 */
  position: relative;
  /* 保留原有的内边距、高度等样式 */
}

2. 让 <td> 内的 <a> 标签绝对定位铺满单元格：

td.name-column a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 8px; /* 匹配原td的内边距，避免点击区域错位 */
  box-sizing: border-box;
  text-decoration: none; /* 可选：保留原文本装饰或按需调整 */
}

• 注意：如果 <td> 内有图标、文件夹标识等其他元素，要确保它们放在 <a> 标签内部，避免被遮挡。

方案二：JavaScript 监听单元格点击事件 #

如果 CSS 方案因现有布局冲突不好实现，可通过 JS 触发跳转：

1. 给名称列单元格绑定点击事件：

document.querySelectorAll('td.name-column').forEach(cell => {
  cell.addEventListener('click', () => {
    const targetLink = cell.querySelector('a');
    if (targetLink?.href) {
      window.location.href = targetLink.href;
    }
  });
  // 添加鼠标悬停提示，告知可点击
  cell.style.cursor = 'pointer';
});

注意事项 #

• 不要直接给 <td> 添加 href 属性，HTML 规范里 <td> 不支持该属性，所以你之前的尝试无效。
• CSS 方案要确保 <td> 没有设置 overflow: hidden，否则扩展的 <a> 标签会被裁剪。
• 两种方案都要保证每个名称列单元格内只有一个有效的跳转链接，避免触发错误地址。

内容的提问来源于stack exchange，提问作者FIREXDF OFF