Question

我喜欢使用td在单个HTML5表单元格中添加三行。我尝试在td内添加一个新的表格元素，如下所示：

    <table>
        <tbody>
            <tr>
                <td>
                    Lorem ipsum
                </td>
                <td>
                    Lorem ipsum
                </td>
                <td>
                    <table>
                        <tbody>
                        <tr>
                            <td>Row 1</td>
                        </tr>
                        <tr>
                            <td>Row 2</td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

我得到两行，但这只会破坏我的标记。

是否有其他解决方案？也许使用flexbox？

Answer 1

这是您可以尝试的东西，我不知道这是否是您想要的东西，但仍然可以。

<table>
    <tbody>
        <tr>
            <td rowspan=2>
                Lorem ipsum
            </td>
            <td rowspan=2>
                Lorem ipsum
            </td>
            <td>
               Row 1
            </td>
        </tr>
        <tr>
            <td>
               Row 2
            </td>
        </tr>
    </tbody>
</table>

Answer 2

qocu类型的答案也可以，但是我不想在各处添加rowspan。所以我最终使用了全能的flexbox。不知道此方法支持哪些版本的IE，但幸运的是，我不需要支持任何史前版本。解决方案：

<table>
    <tbody>
        <tr style="display: flex">
            <td>
                Lorem ipsum
            </td>
            <td>
                Lorem ipsum
            </td>
            <td>
                <div style="display: flex; flex-direction: column">
                    <span>Row 1</span>
                    <span>Row 2</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

单个表格单元中有两行？

2 个答案: