Is there a way to increase the size of a TD cell without adjusting the height of the entire row? I tried using inline styling with "rowspan= 7", but it only centers the data in the middle of the cell.
I am attempting to create a table similar to the one shown in this image and I'm unsure how to adjust the size of "Some Data" and "Other Data" cells like they are shown..
https://i.sstatic.net/z7fc7.png
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>