Re: [CSS21] properties for table-column (In HTML: COL) & table-column-group (In HTML: COLGROUP) items.

Allan Sandfeld Jensen wrote:
> On Wednesday 22 June 2005 21:25, J. King wrote:
>>That's not the point, Kris.  Sure, you'd probably want to style the cell
>>differently from others, but a colspan=2 cell is one child that spans two
>>columns.  For that row :nth-child(2) would select the cell in the third
>>row, not the second.

There is actually a rather complicated way to select all cells that 
appear in certain columns, even when colspan makes a cell span multiple 
columns, but note that it does fail when rowspan is also involved.

/* First Column
  * Selects all cells that appear in the first column
  * regardless of whether they span 1, 2 or 3 columns.
  * i.e. The selected cell may also span columns 2 and 3
  */

td:first-child { font-style: italic; }


/* Second Column
  * Selects all cells that appear in the second column,
  * regardless of whether they span 1, 2 or 3 columns.
  * i.e. The selected cell may also span columns 1 and/or 3
  */

td:not([colspan]):first-child+td,
td[colspan="1"]:first-child+td,
td[colspan]:not([colspan="1"]):first-child
{ font-weight: bold; }


/* Third Column
  * Selects all cells that appear in the third column,
  * regardless of whether they span 1, 2 or 3 columns
  * i.e. The selected cell may also span columns 1 and/or 2
  */

td:not([colspan]):first-child+td:not([colspan])+td,
td:not([colspan]):first-child+td[colspan="1"]+td,
td:not([colspan]):first-child+td[colspan]:not([colspan="1"]),
td[colspan="1"]:first-child+td:not([colspan])+td,
td[colspan="1"]:first-child+td[colspan="1"]+td,
td[colspan="1"]:first-child+td[colspan]:not([colspan="1"]),
td[colspan="2"]:first-child+td,
td[colspan]:not([colspan="1"]):not([colspan="2"]):first-child
{ text-decoration: underline; }

If more columns are added, it gets even more complex than that to select 
those columns; but the above rules will, AFAICT, work for the first 3 
columns regardless of how many columns there are in the table.

> ...
> :nth-column()  # maybe it is just a pseudo element?

That's been suggested and discussed many times before and, IIRC, one of 
the reasons it has not yet been introduced is because its selectivity is 
dependant upon the style of display: table-cell; being applied to the 
elements its selecting.  For example, what happens with this style:

td:nth-column(1) { display: block; }

When this style is applied, it's no longer a table-cell, so the 
nth-column pseudo-class would no longer apply.  As a result, the default 
style for td is re-applied and it is returned to being a table-cell, and 
the selector matches again; thus causing an infinite loop.

The only way such an :nth-column pseudo-class would work is if it were 
defined to select based on the semantics of the document, rather than 
its presentation.  For example, given this HTML fragment:

<tr>
   <td id="td1" colspan="2" rowspan="2">r1 r2 c1 c2</td>
   <td id="td2">r1 c3</td>
</tr>
<tr>
   <td id="td3">r2 c3</td>
</tr>

The semantics of the language, and the structure of that fragment, 
dictate that #td2 and #td3 fall into the 3rd column, and thus 
:nth-column(3) would always apply regardless of whether or not it is 
rendered as a table-cell.  :nth-row(an+b) could also be defined in a 
similar manner.

However, as a result, such a selector would not apply to any random 
element with display: table-cell; applied — the element would need to be 
defined as a table-cell by the markup language.

Also, I think a pseudo element like this would be nice to have.

table::column(an+b)

It could generate table-column boxes much like an element with display: 
table-column; applied. eg. the <col> element in HTML.  If it were added, 
it would remove the need for authors to include the col element where 
it's used purely for presentational purposes.  However, this pseudo 
element still wouldn't solve the problems with styling table columns in 
general.  i.e. that they're limited to styling border, background, width 
and visibility only.

eg.
table::column(2) would generate a column box that is equivalent to a 
second col element in an HTML table like this:

table>col:nth-child(2) { ... }

<table>
   <col>
   <col> <!-- Styles this column -->
   <col>
   ...
</table>

Some problems I can see with a ::column() pseudo element would be 
defining how it interacts with other real elements in the document 
styled as display: table-column; and also what happens when an author 
does this:
table::column(2) { display: block; }

-- 
Lachlan Hunt
http://lachy.id.au/

Received on Monday, 27 June 2005 12:03:46 UTC