简体   繁体   中英

same row height for nested tables in different columns

Is there a way to make the rows of a nested table from one column have the same height as the rows of a nested table from another column?

<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 link: http://jsfiddle.net/XXmPH/

I want to align Item 1 with its corresponding tr in the next column, item 2 with its tr in the next column, and so forth.

I'm pretty sure I can do this with JavaScript but I don't think that that would be a good idea because this table would be loaded with hundreds of rows.

If changing layout is a possibility:

<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>

Otherwise, I think JS is needed

Despite you have already accepted an answer: Mary's answer has the disadvantage, that the columns will no longer align to the column headers. It would be better not to nest the tables at all, but instead, use 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/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM