[css-tables] Transposing table contents

[hfhchan]

There should be a way to make the rows and columns transposed, possibly as an extra keyword on the table-layout property, or a new CSS property.

If you have a very long form where you are modifying multiple objects, e.g. editing multiple Persons with shortName, longName, age, gender, address, etc, it is much easier to generate HTML going by column, instead of looping through all objects per row.

Currently one way to do that is to use writing-mode: vertical-lr on the table and then writing-mode: horizontal-tb on the td and th. That works on Google Chrome, but causes each table row to become 0px tall on Firefox.

[hfhchan]

Flex has flex-direction which changes the direction of the main and cross axis. Meanwhile grid's columns and rows can be transposed by using writing-mode. However, the problem with using writing-mode is that it changes how the text is laid out in its children, which is not always desirable.

[dbaron]

It's worth noting that table layout is substantially less symmetric than grid and flex layout (which were designed to work the same way in both axes). Maybe that's not really an issue for this, though.

[tabatkins]

Right, I don't think the layout symmetry is the important part here; transposing and then laying out as if it had been the transpose all along seems to be exactly what's desired here.

There are some corner cases that'll interact with this, tho, notably the collision mechanics around row/colspans. I presume, tho, that this could be resolved by "just" saying to swap the row/column-major-ness of the algo? That is, find the row/col positions of each cell normally, then transpose them, and layout accordingly? I dunno if this can produce "impossible" layouts, or if that's even something to worry about.

[hfhchan]

With the following markup:

<table style="table-layout: transposed">
  <col style="height:100px">
  <col style="height:100px">
  <col style="height:100px">
  <col style="height:500px">
  <thead>
    <tr style="width:200px"><th>1<th>2<th>3<th>4</tr>
  </thead>
  <tbody>
    <tr style="width:200px"><th>5<th>6<th>7<th>8</tr>
    <tr style="width:200px"><th>9<th>10<th>11<th>12</tr>
  </tbody>
</table>

... we get something like this: (table: black, thead/tbody: blue, tr: green, td: red):

[hfhchan]

<table style="table-layout: transposed">
  <col style="height:100px">
  <col style="height:100px">
  <col style="height:100px">
  <col style="height:500px">
  <thead>
    <tr style="width:200px"><th colspan=2>1<th>3<th>4</tr>
  </thead>
  <tbody>
    <tr style="width:200px"><th>5<th>6<th>7<th rowspan=2>8</tr>
    <tr style="width:200px"><th>9<th>10<th>11</tr>
  </tbody>
</table>

[hfhchan]

(I probably should have put the ← <col> n on the left side as <col> n → instead, since that's where the col starts) 🤔

[tabatkins]

Agreed on these counts. Assign each cell to an area per normal, then transpose the areas. Inheritance (and the fake column "inheritance" still work normally per standard DOM relationships; you'll just need to swap which one is setting width and which is setting height, as you did in your examples.