Question

有没有办法让一列中嵌套表的行与另一列中嵌套表的行具有相同的高度？

<tr>
    <td>1</td>
    <td>123 Technologies</td>
    <td>
        <table>
            <tbody>
                <tr>
                    <td>Item 1</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                </tr>
            </tbody>
        </table>
    </td>
    <td>
        <table>
            <tbody>
                <tr>
                    <td>Blah blah blah</td>
                </tr>
                <tr>
                    <td>Blah blah blah</td>
                </tr>
                <tr>
                    <td>Blah blah blah</td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

jsfiddle链接：http://jsfiddle.net/XXmPH/

我希望将项目1与下一列中相应的tr对齐，项目2与下一列中的tr对齐，等等。

我很确定我可以用JavaScript做到这一点，但我认为这不是一个好主意，因为这个表会加载数百行。

Answer 1

如果有可能改变布局：

<tr>
    <td>1</td>
    <td>123 Technologies</td>
    <td colspan="2">

        <table>
            <tbody>
                <tr>
                    <td style="width: 50%">Item 1</td>
                    <td>Blah blah blah</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>Blah blah blah</td>
                </tr>
                <tr>
                    <td>Item 3</td>
                    <td>Blah blah blah</td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

否则，我认为需要JS

Answer 2

尽管您已经接受了答案：Mary的答案有一个缺点，即列不再与列标题对齐。最好不要将表格嵌套，而是使用rowspan：

<tbody>
    <tr>
        <td rowspan=2>2</td>
        <td rowspan=2>XYZ Industries</td>
        <td>Scope X</td>
        <td>Description X</td>
    </tr>
    <tr>
        <td>Scope Y</td>
        <td>Description Y.</td>
    </tr>
</tbody>

http://jsfiddle.net/XXmPH/1/

不同列中嵌套表的行高相同

2 个答案: