I am struggling with a table structure similar to this
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Alphabet</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
</tr>
</tbody>
</table>
By default, the table displays Number 1 2(top to bottom) and the corresponding alphabet values in another column as Alphabet a b
However, I am trying to modify the display by making the <thead> elements appear vertically. Similarly, I want each individual value within the <tbody> <tr> tags to be displayed vertically so that Number 1 2 are on one horizontal line and Alphabet a b on another.
To achieve this, I have utilized the following CSS:
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
While the thead appears vertical after applying the CSS, unfortunately, the content within the tbody tr remains unchanged.
If anyone has a solution or suggestion on how to make it work effectively, I would greatly appreciate it. THANKS