Rowspan attribute doesn't work on inverted table - html

Question

Notice that 'inverted' means the <tr> now represents a column .
I inverted an HTML table using this CSS code (which I found on internet) :
table {
border-collapse: collapse;
}
tr {
display: block;
float: left;
}
th,
td {
display: block;
border: 1px solid black;
}
<table>
<tr>
<th>name</th>
<th>id</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td rowspan="2">1</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>6</td>
<td>666</td>
</tr>
</table>
The CSS code inverted the table successfully , the problem comes when I try to use rowspan or colspan , it doesn't work . How can I fix it ?

Answer 1

By converting your table to blocks, it's no longer actually a table. I do not believe you will be able to do what you are asking for with this CSS ruleset because rowspan and colspan are table properties.
The best solution is to write your table differently. HTML allows you to write tables with the headers along the side like this:
<table>
<tr>
<th>name</th>
<td>James Bond</td>
<td>Lucipher</td>
</tr>
<tr>
<th>id</th>
<td colspan="2">1</td>
<td>6</td>
</tr>
<tr>
<th>number</th>
<td>007</td>
<td>666</td>
</tr>
</table>
If the problem is related to a SQL query needing to be turned you can dump your data into a matrix of values, then rendering it sideways, or in some cases, there are ways to change your query to do this, but those solutions can be pretty confusing depending on the complexity of your data.