All » Articles » Web related (6)

Table border style collapse test (CSS)

Web related

Posted by: Ferenc Veres on April 30, 2008 10:20:12 PM +00:00(34027 Reads)

This test features the CSS 2.1 border conflict resultion by collapsing each border style. Borders have the same color and width, thus 'border-style' strength ordering should specify whether the table's or the td's border is visible.

  • Small tables in every row have another 'table' style (outer border)
  • Small tables in every column have another 'td' style (inner border + collapse with outer border)
  • Styles are: hidden, none, double, solid, dashed, dotted, ridge, outset, groove, inset, like CSS 2.1 border conflict resultion orders them.
  • Note that while 'hidden' is the strongest and forces to hide, 'none' does not take precedence on the weaker styles.
  • Red "bug indicators" are used on the outer border only, since that's the place where the borders conflict. Thus some green but still invalid borders may appear inside the tables in some cases (e.g. first column of IE6 and 7).

Some details

  • No red borders should appear
  • IE versions older than 8 (beta 1) fail because they always take 'table' more important than 'td'
  • First row, table must not have a surronding border (table=hidden)
  • First column, no border may appear (td=hidden)
  • 'inset' should fall back to 'groove' (IE 6-8b1 renders 'inset')
  • 'outset' should fall back to 'ridge' (IE 6-8b1 renders 'outset')
  • Caused by this fall back two combinations (when falling types conflict) are not clearly specified, thus those may fail (red border) in some more browsers too

Try the test

Please run the test in your browser.

Screenshots

Firefox 2.0.0.13, Linux

Perfect results.

Table border collapse on firefox 2, all looks as described by the standard, all green.

Konqueror 3.5.9, Linux

The red borders appear on the fall-back borders mentioned above, thus may be considered as non-bug.

Two red borders, but on tables which are not rendered in collapse mode anyway (outset, inset).

Internet Explorer 6, Windows

Buggy one. :-( The 'hidden' type is not known at all. Table's border always takes precedence, which is incorrect.

A lot of broken tables appear, because table's border always takes precendence incorrectly.

Internet Explorer 7, Windows

No development compared to IE6.

Table borer collapse examples, same bugs like in IE6.

Internet Explorer 8 beta 1, Windows

Good news, all bugs fixed. I think the two bugs in the first line won't appear in final IE8.

Still no support for inset/outset fallback to groove/ridge! (Renders these styles as specified, which is incorrect.)

Example tables, most of them looks correct. Two hiddens have a thin 1px green border, which is incorrect.

Safari 3.1.1, Windows

Same as Konqueror. The red borders appear on the fall-back borders mentioned above, thus may be considered as non-bug.

Test tables, two red borders, but those are ok. All others are correct.

Opera 9.27, Windows

Perfect results. (Scaled screenshot.)

Test tables, all render borders and collapsed conflict resolution according to standards.

 

 

About me

Photo of me Ferenc Veres
web developer
about me

Commodore books
Commodore logo My C64 and Plus/4 book collection (Hungarian): Commodore könyvek
Featured article
WebDjVuTextEd - online DjVu text layer editor

Exisitng editors for text data DjVu files are quite limited, like for example DjVuSmooth. So I've implemented a new editor in JavaScript, that allows editing both the strucutre of the text (paragraphs, lines, words,...) and the coordinates of the text boxes by simply dragging with the mouse, features like create, delete, merge are also available.

My other websites
Categories