Rowspan attribute doesn't work on inverted table

2562 views html
5

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 ?

answered question

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?

1 Answer

7

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.

posted this

Have an answer?

JD

Please login first before posting an answer.