Skip to content

[css-tables] Cell content for colspan and rowspan #11499

Open
@Crissov

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);}

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions