时间戳

首页 > 解决方案 > 跨越两列的 HTML 表

html - 跨越两列的 HTML 表

问题描述

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

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

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

标签： html

解决方案

您尝试做的不是有效的 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;在 table 标记上以删除列之间的空间
  • onclick="location='#'"在 tr 标签上重定向到新页面（锚标签的行为）
  • color: blue;在 tr 标签上使其看起来像锚标签
  • border-bottom: 1px solid blue;在 td 标签上，以便像锚标签一样有下划线

您可以在此处的 stackblitz上看到这一点。

推荐阅读