HTML table div alignment across tds - html

Question

I have the following code to display comparison of items
<table>
<tr> <!-- Iterating over list of Headers -->
<td>
<div class="Header"><h4>Header Value</h4></div>
<div class="HeaderList"><span>Key</span> <!-- Iterating over list of keys-->
</td>
<td> <!-- Iterating over multiple items -->
<div class="Header"></div>
<div class="HeaderList"><span>Value</span> <!-- Displaying Value next to the key by iterating over them-->
</td>
</tr>
</table>
I want to align the divs with class "Header" and "HeaderValueList" across multiple td.
The value in Header can extend to multiple lines if needed.
I want to set a maximum height for "HeaderKeyList" and "HeaderValueList" not to cross 32px but if its less than that, the height should be dynamically variable and should align across tds.
I have the following css
.HeaderList
{
width:100%;
height:auto;
max-height:32px;
overflow: hidden;
padding-top: 0.5px;
padding-bottom: 0.5px;
}
.Header
{
width:100%;
}
When any of the value spans across multiple rows, my alignment goes awry. Please help. I am open to making changes in javascript as well.
Thanks in advance.

Answer 1

To group rows in a table together, you use tbody. One tbody for each of the lists. So the HTML becomes
<table>
<thead>
<tr>
<th></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value1</th><td></td><td></td>
</tr>
<tr>
<td><div class="HeaderKey">Key1</div></td>
<td><div class="HeaderValue">Item1Value1</div></td>
<td><div class="HeaderValue">Item2Value1</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key2</div></td>
<td><div class="HeaderValue">Item1Value2</div></td>
<td><div class="HeaderValue">Item2Value2</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key3</div></td>
<td><div class="HeaderValue">Item1Value3</div></td>
<td><div class="HeaderValue">Item2Value3</div></td>
</tr>
</tbody>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value2</th><td></td><td></td>
etc, with this result:
See fiddle.
I made one of the values a bit wider, to demonstrate that if you make the window narrower, the div will grow to two lines, and the cells to the left and right will remain lined up (vertically centered; but you can change that) and if you make the window narrower still, the div doesn't grow to more than two lines because of the max-height.