[css-tables] Cell content for colspan and rowspan #11499
Description
In classic paper typography, it is not uncommon to encounter content repetition symbols or ditto marks in tables: Often, the local variant of (either opening or closing) double quotation marks is put as the single content of a slot to indicate that it has the same value as the one above. In HTML, one could fill empty <td>
accordingly, but usually one would use rowspan
in the top-most cell instead, so it spans several slots. Sometimes, this might also be done (with different synbols) for horizontally adjacent cells.
If a style author wanted to turn such a table with cells spanning multiple slots into that classic format with ditto marks, there currently is no solution in CSS (as far as I know). There is also no CSS solution to display the same content into all affected slots, which is something that scripts to sort tables regularly need to do.
<table><thead>
<tr><th>1<th> 2<th> 3</tr>
</thead><tbody>
<tr><td>a<td rowspan=3>b<td> c</tr>
<tr><td>d <td rowspan=2>e</tr>
<tr><td>f </tr>
<tr><td>g<td> h<td> i</tr>
</tbody></table>
1 | 2 | 3 | ——— | 1 | 2 | 3 |
---|---|---|---|---|---|---|
a | b | c | ——— | a | b | c |
d | " | e | ——— | d | b | e |
f | " | " | ——— | f | b | e |
g | h | i | ——— | g | h | i |
I’m not quite sure how to solve this use case and since CSS Tables is kinda the unloved Cinderella module, I won’t expect a solution any time soon, but I still wanted to raise it.
[rowspan]::slot {content: content();}
[colspan]::slot(n+1) {content: '”';}
PS: A CSS table slot is different from a shadow tree slot which the ::slotted()
pseudo element function refers to.
PPS: Perhaps this requires a CSS representation of column and row spans first.
td, th {display: table-cell; table-span: attr(rowspan <number>, 1) attr(colspan <number>, 1);}