Csswg-drafts: [css-tables] Please add table-span

[Nadya678]

No equivalent of rowspan and colspan attribute.

I propose table-span or with value <number>/<number>

For example: table-span: 2/3 will specify: two columns and three rows. Attribute active only if disaplay:table-cell.

default value: table-span: 1/1

[Loirooriol]

I would love this functionality, but I think there should be an independent property for each value.

CSS Multi-column introduces column-span, its syntax could be extended to accept integers, and behave like HTML's colspan in table cells. An analogous row-span property could be added, this one just for table cells.

The proposed table-span could be a shorthand property of column-span and row-span.

[Crissov]

I agree that there should be features in a future level of the CSS Tables module that can replicate the effects of colspan and rowspan in HTML, but I believe it should work differently to honor the CSS model and enable extended use cases.

Authors should be able to specify the spatial directions a table cell 1. may, 2. should or 3. must not merge with adjacent cells.

/*
  | #a | #b |
  |----+----|
  | #c | #d |
=>
  |         |
  |----+    |
  |    |    |
*/
td#a {span-right: merge;}
td#b {span-left: merge;}

td#c {span-right: merge;}
td#d {span-left: none;/* or `avoid` */}

td#a {span-bottom: auto;}
td#c {span-top: auto;}

td#b {span-bottom: merge;}
td#d {span-top: auto;}

In this example, cells _a_, _b_ and _d_ would be merged in a complex, non-rectangular shape that would be impossible to achieve with HTML attributes.

[Loirooriol]

@Crissov Non-rectangular shapes? But containing blocks are rectangles, would this behave like an exclusion? And in which order would the contents of a, b and d be merged in that non-rectangular cell?

Frankly your proposal seems too complex and browser vendors are not much willing to add new features to table layout. So I think this should be restricted to just porting rowspan and colspan, already implemented for HTML tables, to some CSS property.

[Crissov]

Which containing block? table-cell needs to be able to violate table-row and table-column boundaries already, probably also table-row-group and table-column-group, but not table.

Arbitrary table cell merging has been possible in some text processors and DTP software for decades. I don’t see why it should not be an objective for the web platform once its legacy table layout design will have been sorted out for the current level of CSS Tables.

[tabatkins]

@Crissov

1. When someone starts from "CSS should be able to reproduce this HTML functionality", trying to append "and it should also do this vastly more complicated version of that" isn't very helpful. At best it would significantly slow down the effort to harmonize HTML and CSS functionality; at worst it would kill it entirely, as people give up on it for being too complicated.

2. Your suggested functionality has no connection whatsoever to HTML's table spans. HTML spans are about a single element stretching across more than one row and/or column, exactly like Grid spans. Yours seems to be about, somehow, multiple elements merging together, (a) in some non-rectangular fashion and (b) merging their contents in some unspecified fashion as well.

[Nadya678]

@Crissov How shall be shown
td#a {span-right: merge; span-bottom: merge}?

Cells shall be rectangle. They can overlap sometimes like in colspan+rowspan defined but cell cannot have L-like shape.

BTW. In tables the col-span and row-span often will be set simultaneously. Thus I propose table-span with both values like flex-flow group two other values. and overrides them.

[Nadya678]

BTW. cannot be described with use of current version of CSS styles and it looks like "replaced element". It cannot be defined with use of CSS.

[Crissov]

Simple things should be easy, complex things should be possible. The former should not complicate the latter. Sometimes there is an elegant solution to cover both. I’m only saying the WG should be investigating such solutions instead of going straight for the first intuitive-looking proposal.

I am not proposing a concrete syntax (which would also need to define merging behavior). It was just an example.