Rowspan attribute doesn't work on inverted table

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 ?

inverting a table like this is a hack because you changed the display property of row/col so don't expect that you can still use table features. btw, why doing so, when you can simply use normal table? — Temani Afif, Nov 08 '18 at 22:55
[I answered a question about how to do this with JavaScript, if that interests you](https://stackoverflow.com/a/52205776/215552). — Heretic Monkey, Nov 09 '18 at 01:55

score 0 · Answer 1 · answered Nov 08 '18 at 22:58

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.

Rowspan attribute doesn't work on inverted table

1 Answers1