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