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

2021-04-03 11:55:17 +08:00
 LUREN
<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 里添加一行内容。
1384 次点击
所在节点    问与答
15 条回复
vJianZhen
2021-04-03 11:59:00 +08:00
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
可以用伪类
cpstar
2021-04-03 20:08:37 +08:00
如果如 7#的目的,我的理解犹如表格最后一行的汇总(总计)或者备注一类的实际效果,那么我的做法,如果表格栏目数固定,用 tr-td+colspan-p,如果不固定,table 之后追加 div

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/767758

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX