-
Notifications
You must be signed in to change notification settings - Fork 757
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 symbols) for horizontally adjacent cells – then using colspan instead.
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);}