I'm facing a challenge with a table that has two rows, and I need to reduce the height of the top row (highlighted in blue) to match the height of its child div (.black), but I'm struggling to make it work.
I've experimented with various adjustments such as:
- changing the margin of the div
- adjusting the margin, padding, and height of the row
- setting the table's
table-layoutstyle attribute
Unfortunately, none of these attempts have resolved the issue.
Here is the Codepen link with the full source code.
The structure of the table:
<table>
<tr>
<td rowspan="2" style="padding-left: 10px;">
<div class="col1"></div>
</td>
<td style="height: 1px;">
<div class="black"></div>
</td>
</tr>
<tr>
<td>
<div class="out"></div>
</td>
</tr>
</table>
The CSS style for the black div:
div.black {
display: inline-block;
width: 128px;
height: 10px;
background-color: black;
vertical-align: top;
margin: 0px;
margin-left: 10px;
}