求助一个 <table> 内容插入问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1328 天前的主题，其中的信息可能已经有所发展或是发生改变。

<table>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
  </tr>
</table>

我需要在 tr 标签里插一行内容，类似下面这样。

<table>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <p>ddd</p>
  </tr>
</table>

但这样不符合规范，浏览器会将 p 标签放在表格前面。

请问这个问题有解决方法吗？我想在 tr 里添加一行内容。

15 条回复 • 2021-04-03 20:08:37 +08:00

vJianZhen

2021-04-03 11:59:00 +08:00 via Android

tr 或者 table 结束后加行不行，用另一个标签包裹

LUREN

2021-04-03 12:08:24 +08:00

@vJianZhen 不行哦，我只能添加内容到 tr 内。。

oott123

2021-04-03 12:30:12 +08:00

添加 </tr><tr><td colspan="3"><p>ddd</p>

LUREN

2021-04-03 12:38:08 +08:00

@oott123 因为种种原因，只能添加到 tr 内。。

stabc

2021-04-03 12:40:11 +08:00

你要说目的，别人才能帮你想解决方案。

oott123

2021-04-03 12:41:20 +08:00

@LUREN 可我说的就是添加到 tr 内啊。

LUREN

2021-04-03 12:47:51 +08:00

@stabc 目的是希望在 tr 里显示两行内容，一行是 td 组成的，一行是另外添加的（之所以不添加到 td 里是希望添加的内容可以独占一行宽度）

LUREN

2021-04-03 12:52:53 +08:00

@oott123 可以在不添加 tr 的情况下解决吗? 添加 tr 会带了一些问题，目标页面是一个很老的系统生成，逻辑中还对 tr 数量有限制，超过多少 tr 就不输出了。。

stabc

2021-04-03 13:07:27 +08:00

@LUREN 那就只能再嵌套一个 table 了，当前 TR 只加一个 TD，然后把需要三列显示的内容放到新增 table 里。

shintendo

2021-04-03 13:19:59 +08:00

自己写 div 模拟 table 吧

Sunyanzi

2021-04-03 13:45:43 +08:00

在纯 HTML 的层面如果不增加 tr 肯定是做不到 ... 只能用点别的技巧如下 ...

i.imgur.com/VjSEdVS.png

原理是这样 ... 把新增的 td 移出文档流单独显示 ... 然后增高 td 给新增的 td 腾位子避免挤在一起 ...

能实现但挺 ugly 的 ... 如果系统只限制了 tr 的数量 ... 按楼上说的用 div 模拟 table 应该是个漂亮些的解决方案 ...

iNaru

2021-04-03 14:49:37 +08:00

@LUREN #7 这是要使用 td 的跨行、跨列属性 rowspan 、colspan 。

otakustay

2021-04-03 15:54:16 +08:00

只能添加到 tr 里就没戏，请想办法解决你的“种种原因”……

optional

2021-04-03 18:05:04 +08:00 via iPhone

可以用伪类

cpstar

2021-04-03 20:08:37 +08:00

如果如 7#的目的，我的理解犹如表格最后一行的汇总（总计）或者备注一类的实际效果，那么我的做法，如果表格栏目数固定，用 tr-td+colspan-p，如果不固定，table 之后追加 div

如果 LZ 必须追求 tr，我觉得 LZ 要放弃强迫症，以实现目的为第一要求，第二要求才是优雅。