V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
LUREN
V2EX  ›  问与答

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

  •  
  •   LUREN · 2021-04-03 11:55:17 +08:00 · 1201 次点击
    这是一个创建于 1091 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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
        1
    vJianZhen  
       2021-04-03 11:59:00 +08:00 via Android
    tr 或者 table 结束后加行不行,用另一个标签包裹
    LUREN
        2
    LUREN  
    OP
       2021-04-03 12:08:24 +08:00
    @vJianZhen 不行哦,我只能添加内容到 tr 内。。
    oott123
        3
    oott123  
       2021-04-03 12:30:12 +08:00
    添加 </tr><tr><td colspan="3"><p>ddd</p>
    LUREN
        4
    LUREN  
    OP
       2021-04-03 12:38:08 +08:00
    @oott123 因为种种原因,只能添加到 tr 内。。
    stabc
        5
    stabc  
       2021-04-03 12:40:11 +08:00
    你要说目的,别人才能帮你想解决方案。
    oott123
        6
    oott123  
       2021-04-03 12:41:20 +08:00
    @LUREN 可我说的就是添加到 tr 内啊。
    LUREN
        7
    LUREN  
    OP
       2021-04-03 12:47:51 +08:00
    @stabc 目的是希望在 tr 里显示两行内容,一行是 td 组成的,一行是另外添加的(之所以不添加到 td 里是希望添加的内容可以独占一行宽度)
    LUREN
        8
    LUREN  
    OP
       2021-04-03 12:52:53 +08:00
    @oott123 可以在不添加 tr 的情况下解决吗? 添加 tr 会带了一些问题,目标页面是一个很老的系统生成,逻辑中还对 tr 数量有限制,超过多少 tr 就不输出了。。
    stabc
        9
    stabc  
       2021-04-03 13:07:27 +08:00
    @LUREN 那就只能再嵌套一个 table 了,当前 TR 只加一个 TD,然后把需要三列显示的内容放到新增 table 里。
    shintendo
        10
    shintendo  
       2021-04-03 13:19:59 +08:00
    自己写 div 模拟 table 吧
    Sunyanzi
        11
    Sunyanzi  
       2021-04-03 13:45:43 +08:00
    在纯 HTML 的层面如果不增加 tr 肯定是做不到 ... 只能用点别的技巧如下 ...

    i.imgur.com/VjSEdVS.png

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

    能实现但挺 ugly 的 ... 如果系统只限制了 tr 的数量 ... 按楼上说的用 div 模拟 table 应该是个漂亮些的解决方案 ...
    iNaru
        12
    iNaru  
       2021-04-03 14:49:37 +08:00
    @LUREN #7 这是要使用 td 的跨行、跨列属性 rowspan 、colspan 。
    otakustay
        13
    otakustay  
       2021-04-03 15:54:16 +08:00
    只能添加到 tr 里就没戏,请想办法解决你的“种种原因”……
    optional
        14
    optional  
       2021-04-03 18:05:04 +08:00 via iPhone
    可以用伪类
    cpstar
        15
    cpstar  
       2021-04-03 20:08:37 +08:00
    如果如 7#的目的,我的理解犹如表格最后一行的汇总(总计)或者备注一类的实际效果,那么我的做法,如果表格栏目数固定,用 tr-td+colspan-p,如果不固定,table 之后追加 div

    如果 LZ 必须追求 tr,我觉得 LZ 要放弃强迫症,以实现目的为第一要求,第二要求才是优雅。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4751 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:37 · PVG 13:37 · LAX 22:37 · JFK 01:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.