跨越两列的 HTML 表答案

【问题标题】：HTML Table that spans two columns跨越两列的 HTML 表
【发布时间】：2019-09-22 13:52:15
【问题描述】：

我有一个非常简单的带有一些文本的 HTML 表格，并且想要一个跨越两个表格列的链接，但为了格式化，仍然保持两列分开。我试过类似的东西

<table>
    <tr>
        <a href="#">
            <td>text 1</td>
            <td>text 2</td>
        </a>
    </tr>
</table>

但是链接没有出现，并且在检查 HTML 时，<a> 标记根本不存在。有没有办法做到这一点？我不希望里面的文本跨越两列，只需要处理文本的链接和中间的空格。

【问题讨论】：

非法HMTL.....使用两个A标签或点击表格行<tr onclick="location='otherpage.html'" style="cursor:pointer">
不可能。这里更大的目标是什么？你想用这种类型的布局来完成什么？

标签： html

【解决方案1】：

您尝试做的不是有效的 HTML。你不能有<tr> -> <a> -> <td>

试试下面的方法 -

<table style="border-collapse: collapse;">
    <tr onclick="location='#'" style="cursor:pointer; color: blue;">
        <td style="border-bottom: 1px solid blue;">text 1</td>
        <td style="border-bottom: 1px solid blue;">text 2</td>
    </tr>
</table>

在表格标签上添加了border-collapse: collapse; 以删除列之间的空格
tr 标签上的onclick="location='#'" 重定向到新页面（锚标签的行为）
tr 标签上的color: blue; 使其看起来像锚标签
border-bottom: 1px solid blue; 在 td 标签上，以便像锚标签一样有下划线

你可以在stackblitz here看到这个。

【讨论】：

【解决方案2】：

跨越两个单元格的锚点是非法的 HTML

改为使用两个A标签

<table>
  <tr>
    <td><a href="...">text 1</a></td>
    <td><a href="...">text 2</a></td>
  </tr> 
</table>

或者点击表格行

<tr onclick="location='otherpage.html'" style="cursor:pointer">

【讨论】：

【解决方案3】：

使用 Anchor 标签跨越两列是错误的而是折叠两个表格列

【讨论】：

【解决方案4】：

你不能在表格中放置锚标记。这是错误的。

而是.. 将标签放入标签中，然后将跨度设置为 2.. 以覆盖两列.. 或者您只需在两次中添加标签。

希望这会有所帮助。

【讨论】：

【解决方案5】：

不应将单个锚标记用于两个元素。相反，使用类似的东西文本1 文字2

【讨论】：

欢迎来到SO，也请用一些代码回答问题。