CSS2.1 Conformance Test Suite

Chapter 17 - Tables (968 tests)

Test Flags
17 Tables
17.1 Introduction to tables
Aligning Table Data (cell data is vertically aligned)
  • Cell data can be vertically aligned.
Aligning Table Data (cell data is horizontally aligned)
  • Cell data can be horizontally aligned.
Aligning Table Data (row data is aligned)
  • Cell data in a row can be horizontally and vertically aligned.
Aligning Table Data (column data is aligned)
  • Alignment of cell data in a column is achieved by specifying alignment properties on the cells themselves, and not on the column element directly.
Borders on Table Elements (row groups)
  • Borders can be applied to row groups (through the use of tbody elements).
Borders on Table Elements (rows)
  • Borders can be applied to table rows.
Borders on Table Elements (column-groups)
  • Borders can be applied to table column groups.
Borders on Table Elements (columns)
  • Borders can be applied to table columns.
Borders on Table Elements (cell)
  • Border can be applied to table cells.
Introduction to Tables (text-align, font-weight)
  • 'text-align' and 'font-weight' can be applied to table cells (example from spec section 17.1).
Introduction to Tables (vertical-align)
  • 'vertical-align' can be set on table cells (example from section 17.1).
Introduction to Tables (border-collapse, border)
  • 'border-collapse' and 'border' can be set on table elements (example from section 17.1).
Introduction to Tables (caption-side)
  • 'caption-side' can be set on a table caption (example from section 17.1).
Table organization (columns in column groups)
  • Table columns can be grouped into table column groups.
Table organization (rows in row groups)
  • Table rows can be grouped into table row groups.
17.2 The CSS table model
CSS table display types
  • CSS display table types are supported.
HTML table with every table element
  • HTML table elements are supported.
Display-table
  • An element with display set to 'table' renders as if it were a table.
Inline-table
  • An element with 'display: inline-table' is rendered as if it were an inline.
Table-caption
  • An element with 'display: table-caption' is rendered as if it were a table caption.
Tables with and without the optional caption
  • The table caption is optional - a table can be rendered with or without it.
Inline-tables with and without the optional caption
  • A caption on an inline-table is optional - an inline table can be rendered with or without it.
Table-cell
  • An element with 'display: table-cell' is rendered as if it were a table cell.
Image as 'display: table-cell'
  • An image element can have a display value of 'table-cell'.
G
Table-column
  • An element with 'display: table-column' as if it were a table column.
Table-column-group
  • An element with 'display: table-column-group' is rendered as if it were a table column group.
Table columns are not rendered
  • Table columns in themselves are not rendered.
Table column groups are not rendered
  • Table column groups in themselves are not rendered.
Table columns can induce a style on their cells
  • Table columns can induce a style (background-color) on the cells they occupy.
Table column groups can induce a style on their cells
  • Table column groups can induce a style (background-color) on the cells they occupy.
Table-header-group
  • An element with 'display: table-header-group' is rendered as if it were a table header group.
Table header group and other row groups
  • A table-header-group element is placed before all other row groups in a table.
Table header group and top captions
  • A table-header-group element is placed after any top captions.
Repeating table header groups in paged media
  • Print user agents may repeat header rows on each page spanned by a table (non-normative rule).
P
Multiple table header groups
  • A table containing multiple table-header-group elements only uses the first one as its header and treats the others as table row groups.
Table-row
  • An element with 'display: table-row' is rendered as if it were a table row.
Table-row-group
  • An element with 'display: table-row-group' is rendered as if it were a table row group.
17.2.1 Anonymous table objects
Auto-imported from Gecko test 315146-1.xhtml
Auto-imported from Gecko test 315146-1.xhtml
Auto-imported from Gecko test 372641-1a.xhtml
Auto-imported from Gecko test 121142-1a.html O
Auto-imported from Gecko test 121142-1a.html O
Auto-imported from Gecko test 121142-1b.html O
Auto-imported from Gecko test 121142-1b.html O
Auto-imported from Gecko test 121142-2.html O
Auto-imported from Gecko test 121142-2.html O
Auto-imported from Gecko test 156888-2.html O
Auto-imported from Gecko test 156888-2.html O
Auto-imported from Gecko test 203923-1.html O
Auto-imported from Gecko test 203923-1.html O
Auto-imported from Gecko test 203923-2.html O
Auto-imported from Gecko test 203923-2.html O
Auto-imported from Gecko test 208305-1.html O
Auto-imported from Gecko test 208305-1.html O
Auto-imported from Gecko test 208305-2.html O
Auto-imported from Gecko test 208305-2.html O
Auto-imported from Gecko test 208305-3.html
Auto-imported from Gecko test 208305-3.html
Auto-imported from Gecko test 208305-4.html O
Auto-imported from Gecko test 208305-4.html O
Auto-imported from Gecko test 277995-1.html O
Auto-imported from Gecko test 277995-1.html O
Auto-imported from Gecko test 293576-1.html O
Auto-imported from Gecko test 293576-1.html O
Auto-imported from Gecko test 302113-1.html O
Auto-imported from Gecko test 302113-1.html O
Auto-imported from Gecko test 372641-1a.xhtml
Auto-imported from Gecko test 372641-1b.xhtml
Auto-imported from Gecko test 325543-1a.html
Auto-imported from Gecko test 325543-1a.html
Auto-imported from Gecko test 325543-1b.html
Auto-imported from Gecko test 325543-1b.html
Auto-imported from Gecko test 338735-1.html O
Auto-imported from Gecko test 338735-1.html O
Auto-imported from Gecko test 339388-1a.html O
Auto-imported from Gecko test 339388-1a.html O
Auto-imported from Gecko test 339388-1b.html O
Auto-imported from Gecko test 339388-1b.html O
Auto-imported from Gecko test 363326-1.html O
Auto-imported from Gecko test 363326-1.html O
Auto-imported from Gecko test 368932-1.html O
Auto-imported from Gecko test 368932-1.html O
Auto-imported from Gecko test 371054-1.html O
Auto-imported from Gecko test 371054-1.html O
Auto-imported from Gecko test 372641-1b.xhtml
Auto-imported from Gecko test 372641-1c.xhtml
Auto-imported from Gecko test 372641-1c.xhtml
Auto-imported from Gecko test 372649-1.html O
Auto-imported from Gecko test 372649-1.html O
Auto-imported from Gecko test 373379-1.html O
Auto-imported from Gecko test 373379-1.html O
Auto-imported from Gecko test 407115-1.html
Auto-imported from Gecko test 407115-1.html
Auto-imported from Gecko test 448111-1.html O
Auto-imported from Gecko test 448111-1.html O
Auto-imported from Gecko test infer-first-row.html
Auto-imported from Gecko test infer-first-row.html
Auto-imported from Gecko test infer-first-row-and-table.html
Auto-imported from Gecko test infer-first-row-and-table.html
Auto-imported from Gecko test infer-second-row.html
Auto-imported from Gecko test infer-second-row.html
Auto-imported from Gecko test infer-second-row-and-table.html
Auto-imported from Gecko test infer-second-row-and-table.html
Auto-imported from Gecko test infer-table-around-headers-footers-1.html
Auto-imported from Gecko test infer-table-around-headers-footers-1.html
Auto-imported from Gecko test infer-table-around-headers-footers-2.html
Auto-imported from Gecko test infer-table-around-headers-footers-2.html
Auto-imported from Gecko test infer-table-around-headers-footers-3.html
Auto-imported from Gecko test infer-table-around-headers-footers-3.html
Auto-imported from Gecko test infer-rows-inside-rowgroups.html
Auto-imported from Gecko test infer-rows-inside-rowgroups.html
Auto-imported from Gecko test infer-table-row-cell.html
Auto-imported from Gecko test infer-table-row-cell.html
Auto-imported from Gecko test infer-table.html
Auto-imported from Gecko test infer-table.html
Auto-imported from Gecko test 3-tables-ref.html
Auto-imported from Gecko test 3-tables-ref.html
Auto-imported from Gecko test blocks-divide-tables-1.html
Auto-imported from Gecko test blocks-divide-tables-1.html
Auto-imported from Gecko test blocks-divide-tables-2.html
Auto-imported from Gecko test blocks-divide-tables-2.html
Auto-imported from Gecko test infer-cells-1.html
Auto-imported from Gecko test infer-cells-1.html
Auto-imported from Gecko test infer-cells-2.html
Auto-imported from Gecko test infer-cells-2.html
Auto-imported from Gecko test infer-cells-3.html
Auto-imported from Gecko test infer-cells-3.html
Auto-imported from Gecko test infer-cells-4.html
Auto-imported from Gecko test infer-cells-4.html
Auto-imported from Gecko test cols-test-1.html
Auto-imported from Gecko test cols-test-1.html
Auto-imported from Gecko test cols-test-2.html
Auto-imported from Gecko test cols-test-2.html
Auto-imported from Gecko test cols-test-3.html
Auto-imported from Gecko test cols-test-3.html
Auto-imported from Gecko test dynamic-removal-1.html O
Auto-imported from Gecko test dynamic-removal-1.html O
Auto-imported from Gecko test dynamic-removal-2.html O
Auto-imported from Gecko test dynamic-removal-2.html O
Auto-imported from Gecko test dynamic-removal-3.html O
Auto-imported from Gecko test dynamic-removal-3.html O
Auto-imported from Gecko test dynamic-removal-4.html O
Auto-imported from Gecko test dynamic-removal-4.html O
Auto-imported from Gecko test dynamic-removal-5.html O
Auto-imported from Gecko test dynamic-removal-5.html O
Auto-imported from Gecko test dynamic-removal-6.html O
Auto-imported from Gecko test dynamic-removal-6.html O
Auto-imported from Gecko test dynamic-removal-7.html O
Auto-imported from Gecko test dynamic-removal-7.html O
Auto-imported from Gecko test dynamic-removal-8.html O
Auto-imported from Gecko test dynamic-removal-8.html O
Auto-imported from Gecko test dynamic-removal-9.html O
Auto-imported from Gecko test dynamic-removal-9.html O
Auto-imported from Gecko test dynamic-removal-10.html O
Auto-imported from Gecko test dynamic-removal-10.html O
Auto-imported from Gecko test dynamic-removal-11.html O
Auto-imported from Gecko test dynamic-removal-11.html O
Auto-imported from Gecko test dynamic-removal-12.html O
Auto-imported from Gecko test dynamic-removal-12.html O
Auto-imported from Gecko test dynamic-removal-13.html O
Auto-imported from Gecko test dynamic-removal-13.html O
Auto-imported from Gecko test dynamic-removal-14.html O
Auto-imported from Gecko test dynamic-removal-14.html O
Auto-imported from Gecko test dynamic-removal-15.html O
Auto-imported from Gecko test dynamic-removal-15.html O
Auto-imported from Gecko test dynamic-removal-16.html O
Auto-imported from Gecko test dynamic-removal-16.html O
Auto-imported from Gecko test dynamic-removal-17.html O
Auto-imported from Gecko test dynamic-removal-17.html O
Auto-imported from Gecko test dynamic-insert-cell-1.html O
Auto-imported from Gecko test dynamic-insert-cell-1.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-1.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-1.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-2.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-2.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-3.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-3.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-4.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-4.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-5.html O
Auto-imported from Gecko test dynamic-switch-block-to-cell-5.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-1.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-1.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-2.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-2.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-3.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-3.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-4.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-4.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-5.html O
Auto-imported from Gecko test dynamic-switch-inline-to-cell-5.html O
Auto-imported from Gecko test white-space-1.html O
Auto-imported from Gecko test white-space-1.html O
Auto-imported from Gecko test white-space-2.html O
Auto-imported from Gecko test white-space-2.html O
Auto-imported from Gecko test white-space-3.html O
Auto-imported from Gecko test white-space-3.html O
Auto-imported from Gecko test white-space-4.html O
Auto-imported from Gecko test white-space-4.html O
Auto-imported from Gecko test white-space-5.html O
Auto-imported from Gecko test white-space-5.html O
Auto-imported from Gecko test white-space-6.html O
Auto-imported from Gecko test white-space-6.html O
Auto-imported from Gecko test white-space-7.html
Auto-imported from Gecko test white-space-7.html
Auto-imported from Gecko test white-space-8.html O
Auto-imported from Gecko test white-space-8.html O
Auto-imported from Gecko test white-space-9.html O
Auto-imported from Gecko test white-space-9.html O
Auto-imported from Gecko test white-space-10.html O
Auto-imported from Gecko test white-space-10.html O
Auto-imported from Gecko test white-space-11.html O
Auto-imported from Gecko test white-space-11.html O
Auto-imported from Gecko test white-space-12.html
Auto-imported from Gecko test white-space-12.html
Auto-imported from Gecko test white-space-13.html
Auto-imported from Gecko test white-space-13.html
Auto-imported from Gecko test white-space-14.html
Auto-imported from Gecko test white-space-14.html
Auto-imported from Gecko test white-space-15.html
Auto-imported from Gecko test white-space-15.html
Auto-imported from Gecko test white-space-16.html O
Auto-imported from Gecko test white-space-16.html O
Auto-imported from Gecko test white-space-17.html O
Auto-imported from Gecko test white-space-17.html O
Auto-imported from Gecko test white-space-18.html
Auto-imported from Gecko test white-space-18.html
Auto-imported from Gecko test white-space-19.html
Auto-imported from Gecko test white-space-19.html
Auto-imported from Gecko test white-space-20.html O
Auto-imported from Gecko test white-space-20.html O
Auto-imported from Gecko test white-space-21.html O
Auto-imported from Gecko test white-space-21.html O
Auto-imported from Gecko test white-space-22.html
Auto-imported from Gecko test white-space-22.html
Auto-imported from Gecko test white-space-23.html
Auto-imported from Gecko test white-space-23.html
Auto-imported from Gecko test white-space-24.html O
Auto-imported from Gecko test white-space-24.html O
Auto-imported from Gecko test white-space-25.html O
Auto-imported from Gecko test white-space-25.html O
Auto-imported from Gecko test white-space-26.html O
Auto-imported from Gecko test white-space-26.html O
Auto-imported from Gecko test white-space-pre-1.html O
Auto-imported from Gecko test white-space-pre-1.html O
17.3 Columns
Column background property
  • A background can be set on a table column.
Column-group background property
  • A background can be set on a table column group.
Column border property
  • A border can be set on a table column.
Column-group border property
  • A border can be set on a table column group.
Column visibility property
  • Visibility can be set on a table column.
Column group visibility property
  • Visibility can be set on a table column group.
Spanning cell that intersects a 'visibility: collapse' column
  • Contents of a cell which spans through a collapsed column are clipped.
Column with 'width' property
  • Width can be set on a table column.
Column-group width property
  • Width can be set on a table column group.
Table columns - Emulating the HTML table 'rules' attribute on columns
  • CSS can be used to emmulate the HTML 'rules = cols' attribute (example from section 17.3).
Table columns - Assigning a background to a column
  • A specific column class can be selected for a blue background (example from section 17.3).
Table columns - assigning a fixed size to a column
  • A specific width can be set on a table column (modified example from section 17.3).
17.4 Tables in the visual formatting model
Caption border and table border
  • A caption has padding, margin and borders independent of those of its parent table.
Caption border and inline-table border
  • A caption has padding, margin and borders independent of those of its parent inline-table.
The anonymous block box around a table does not work with run-in interaction
  • The anonymous block around a table does not behave like a block for 'run-in' interaction.
The anonymous block box around a table is not used for baseline vertical alignment
  • The table box (and not anonymous containing block) is used for doing baseline vertical alignment for inline-table.
The anonymous block box around a table is as wide as the border edge of the table
  • The anonymous block around the table and caption is as wide as the border edge of the table box.
The anonymous block box around a table is not used for table percentage width
  • The percentage width of table is relative to its anonymous box's containing block.
The anonymous block box around a table and the table 'position' property
  • The 'position' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'float' property
  • The 'float' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'margin-top' property
  • The 'margin-top' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'right' property
  • The 'right' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'bottom' property
  • The 'bottom' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'left' property
  • The 'left' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table - table top margin is collapsed with caption top margin
  • The top margin of the table caption is not collapsed with top margin of the table.
A
The anonymous block box around a table - table bottom margin is collapsed with caption bottom margin
  • The bottom margin of the table caption is not collapsed with bottom margin of the table when 'caption-side: bottom'.
A
The anonymous box around a table as a 'block' box
  • The anonymous box around a table is a 'block' box if the table is block-level.
The anonymous box around a table as an 'inline-block' box
  • The anonymous box around a table is an 'inline-block' box if the table is inline-level.
The anonymous block box around a table is not used for table percentage height
  • Percentage height of table is relative to its anonymous box's containing block.
The anonymous block box around a table and the table 'margin-bottom' property
  • The 'margin-bottom' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'margin-left' property
  • The 'margin-left' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'margin-right' property
  • The 'margin-right' property of a table is actually applied to its anonymous block box.
The anonymous block box around a table and the table 'margin' property
  • The 'margin' property of a table is actually applied to its anonymous block box.
17.4.1 Caption position and alignment
Caption-side set to 'top'
  • A caption with a 'caption-side' value of 'top' will be positioned above its table.
Caption-side set to 'bottom'
  • A caption with a 'caption-side' value of 'bottom' will be positioned below its table.
Caption-side set to 'inherit'
  • A caption can inherit its 'caption-side' behavior from its table parent.
Caption-side and 'display: inline' elements
  • Caption-side does not apply to 'display: inline' elements.
Caption-side and 'display: block' elements
  • Caption-side does not apply to 'display: block' elements.
Caption-side and 'display: list-item' elements
  • Caption-side does not apply to 'display: list-item' elements.
Caption-side and 'display: run-in' elements
  • Caption-side does not apply to 'display: run-in' elements.
Caption-side and 'display: inline-block' elements
  • Caption-side does not apply to 'display: inline-block' elements.
Caption-side and 'display: table' elements
  • Caption-side does not apply to 'display: table' elements.
Caption-side and 'display: inline-table' elements
  • Caption-side does not apply to 'display: inline-table' elements.
Caption-side and 'display: table-row-group' elements
  • Caption-side does not apply to 'display: table-row-group' elements.
Caption-side and 'display: table-header-group' elements
  • Caption-side does not apply to 'display: table-header-group' elements.
Caption-side and 'display: table-footer-group' elements
  • Caption-side does not apply to 'display: table-footer-group' elements.
Caption-side and 'display: table-column' elements
  • Caption-side does not apply to 'display: table-column' elements.
Caption-side and 'display: table-row' elements
  • Caption-side does not apply to 'display: table-row' elements.
Caption-side and 'display: table-column-group' elements
  • Caption-side does not apply to 'display: table-column-group' elements.
Caption-side and 'display: table-cell' elements
  • Caption-side does not apply to 'display: table-cell' elements.
Caption-side and 'display: table-caption' elements
  • Caption-side applies to 'display: table-caption' elements.
Caption-side and 'display: none' elements
  • Caption-side does not apply to 'display: none' elements.
Caption-side and 'display: inherit' elements
  • Caption-side applies to 'display: inherit' elements which do not inherit the value of 'table-caption'.
Caption border and table border
  • Caption-side, text-align and width properties of a caption work together as expected (example from section 17.4.1).
Caption-side is inherited by default
  • Caption-side is inherited by default.
Initial value of 'caption-side'
  • The initial value of 'caption-side' is 'top'.
Horizontally aligning table caption content
  • Table caption content can be horizontally aligned with the 'text-align' property.
17.5 Visual layout of table contents
Cells can have padding
  • Table cells can have padding.
A
Internal table elements do not have margins
  • Internal table elements do not have margins.
Each table row box occupies one row of cells
  • Each table row box occupies one row of cells.
Table row boxes are rendered in source order
  • Table row boxes fill the table from top to bottom by the order they occur in the page source.
Row groups occupy same cells as the rows they contain
  • A row group occupies the same cells as the rows it contains.
Column boxes can occupy more than one column of cells
  • A column box can occupy more than one column of cells.
Column boxes are rendered by page source order
  • Column boxes are placed consecutively by their order in the page source.
Column boxes are rendered by source order ('rtl' table scenario)
  • Column boxes are placed consecutively by their order in the page source, from right to left when 'direction' is set to 'rtl'.
Column group boxes occupy same cells as the columns they contain
  • A column group box occupies the same cells as the columns it contains.
A row-spanning cell
  • A table cell can span several rows.
A column-spanning cell
  • A cell can span several columns.
Top row of a spanning cell is the row of its parent element
  • The top row of a spanning cell's rectangle is in the row specified by the cell's parent.
A spanning cell must be as far to the left as possible in an 'ltr' table
  • The spanning cell's rectangle is as far to the left as possible, but to the right of all cells in the same row that were earlier in source (no overlapping).
A spanning cell's rectangle must be as far to the right as possible in an 'rtl' table
  • With 'rtl' tables, the spanning cell's rectangle is as far to the right as possible, but to the left of all cells in the same row that were earlier in source (no overlapping).
A cell cannot extend beyond the last row box of a table
  • A cell box cannot extend beyond the last row box of a table.
A cell box cannot extend beyond the last row of a row group
  • A cell box cannot extend beyond the last row box of a row group.
Table row boxes exactly cover the table in the collapsing borders model
  • In the collapsing border model, the table row boxes together exactly cover the table.
Table column boxes exactly cover the table in the collapsing borders model
  • In the collapsing border model, the table column boxes together exactly cover the table.
There may be gaps between rows in the separated borders model
  • In the separated border model, there may be gaps between rows.
There may be gaps between columns in the separated borders model
  • In the separated border model, there may be gaps between columns.
There may be gaps between row groups in the separated borders model
  • In the separated border model, there may be gaps between row groups.
There may be gaps between column groups in the separated borders model
  • In the separated borders model, there may be gaps between column groups.
Positioning table cells can cause them not to be table cells anymore
  • Positioning table cells can cause them not to be table cells anymore.
Floating a cell can cause it to not be a cell anymore
  • Floating a table cell can cause it not to be a table cell anymore.
Handling cell spanning conflicts
  • When resolving cell spanning conflicts, user agents are free to visually overlap the cells or to shift the cell to avoid the visual overlap (example from spec section 17.5).
G
17.5.1 Table layers and transparency
Rendering of missing table cells
  • Missing table cells are rendered as if their grid position were occupied by an anonymous table-cell box.
Background on a table element shows if all elements above its layer are transparent
  • A background set on a table element will show if all table element layers above it are transparent.
Background on a column group element shows if all elements above its layer are transparent
  • A background set on a column group element will show if all table element layers above it are transparent.
Background on a column group element shows on all of a cell that spans through it
  • A background set on a column group element will show on all of a cell that spans outside of it, but it will not affect background image positioning.
Background on a column element shows if all elements above its layer are transparent
  • A background set on a column element will show if all table element layers above it are transparent.
Background on a column element shows in all of a cell that spans through it
  • A background set on a column element will show on all of a cell that spans outside of it, but it will not affect background image positioning.
Background on a row group element shows if all elements above its layer are transparent
  • A background set on a row group element will show if all table element layers above it are transparent.
Background on a row element shows if all elements above its layer are transparent
  • A background set on a row element will show if all table element layers above it are transparent.
Background on a row elements shows on all of a cell spanning through it
  • A background set on a row element will show on all of a cell that spans outside of it, but it will not affect background image positioning.
Cell element background overlays backgrounds of all other table layers
  • A background set on a cell element will overlay the backgrounds of all table elements below it.
Hidden empty cells are transparent down to table background
  • If 'empty-cells' is set to 'hide', empty cells are transparent all the way down to the table background.
The background between cell borders is the table background
  • The background between cell borders (using the separated borders model) is the background of the table element.
Empty cells set to 'hide' are transparent down to the table background
  • If 'empty-cells' is set to 'hide', empty cells are transparent all the way down to the table background, (example from spec section 17.5.1).
17.5.2 Table width algorithms: the 'table-layout' property
Table-layout set to 'auto'
  • Cell content width is taken into account in the used width of a table when the table has 'table-layout' set to 'auto'.
A
Table-layout set to 'fixed'
  • Cell content width is not taken into account in the used width of a table when the table has 'table-layout' set to 'fixed'.
A
Table-layout set to 'inherit'
  • A table can inherit its 'table-layout' behavior from its parent container.
A
Table-layout and 'display: inline' elements
  • Table-layout does not apply to 'display: inline' elements.
A
Table-layout and 'display: block' elements
  • Table-layout does not apply to 'display: block' elements.
A
Table-layout and 'display: list-item' elements
  • Table-layout does not apply to 'display: list-item' elements.
A
Table-layout and 'display: run-in' elements
  • Table-layout does not apply to 'display: run-in' elements.
A
Table-layout and 'display: inline-block' elements
  • Table-layout does not apply to 'display: inline-block' elements.
A
Table-layout and 'display: table' elements
  • Table-layout applies to 'display: table' elements.
A
Table-layout and 'display: inline-table' elements
  • Table-layout applies to 'display: inline-table' elements.
A
Table-layout and 'display: table-row-group' elements
  • Table-layout does not apply to 'display: table-row-group' elements.
A
Table-layout and 'display: table-header-group' elements
  • Table-layout does not apply to 'display: table-header-group' elements.
A
Table-layout and 'display: table-footer-group' elements
  • Table-layout does not apply to 'display: table-footer-group' elements.
A
Table-layout and 'display: table-row' elements
  • Table-layout does not apply to 'display: table-row' elements.
A
Table-layout and 'display: table-column' elements
  • Table-layout does not apply to 'display: table-column' elements.
A
Table-layout and 'display: table-column-group' elements
  • Table-layout does not apply to 'display: table-column-group' elements.
A
Table-layout and 'display: table-cell' elements
  • Table-layout does not apply to 'display: table-cell' elements.
A
Table-layout and 'display: table-caption' elements
  • Table-layout does not apply to 'display: table-caption' elements.
A
Table-layout and 'display: none' elements
  • Table-layout does not apply to 'display: none' elements.
Table-layout and 'display: inherit' elements
  • Table-layout does not apply to 'display: inherit' elements which do not inherit the value of 'table'.
A
Table-layout is not inherited by default
  • Table-layout is not inherited by default.
A
Initial value of table-layout
  • The initial value of table-layout is 'auto'.
A
A table doesn't size to fit its container when margins are zero and width is 'auto'
  • When table margins are zero and width is 'auto', the table doesn't automatically size to fill its containing block .
Centering a table in its containing block by setting its left and right margins to 'auto'
  • A table can be centered in its containing block by setting its left and right margins to 'auto'.
17.5.2.1 Fixed table layout
Fixed table layout when 'width' property is 'auto'
  • If a browser supports fixed table layout when 'width' is 'auto', a table will size to its containing block, minus any margin space (modified example from spec section 17.5.2.1).
A
Value other than 'auto' for column width sets width of cells in the column
  • A column element with a value other than 'auto' for the 'width' property sets the width for the column of cells it contains.
Cell in the first row with specified width sets the width for the column
  • A cell in the first row with specified non-auto 'width' sets the width for its column in the absence of a column element with specified non-auto width.
Fixed table layout
  • The width of a column-spanning cell (which determines column widths in fixed table layout) is divided over the columns it spans.
Leftover table width is divided evenly among auto-sized columns
  • Any remaining horizontal table space is divided evenly among columns which do not have specified widths.
Remaining table width is divided evenly among non auto-sized columns (minus borders and cell spacing)
  • Any remaining horizontal table space is divided evenly among columns which do not have specified widths (minus borders and cell spacing).
Fixed table width is maximum between table and sum of column 'width' (table width wins)
  • A fixed layout table's width will be its specified width if that width is greater than the sum of its columns' widths.
Cell that overflows a fixed-width table
  • A cell that overflows the fixed table width uses its 'overflow' property to determine whether to clip the overflow content.
Subsequent rows in fixed table layout
  • Cells in subsequent rows after the first do not affect column widths in fixed table layout.
CSS Test Suite: Table with table-layout fixed, width auto (inline-level)
  • A table with fixed table-layout and auto width may be sized according to the auto table layout algorithm.
Fixed table layout - specified column width overrides first-cell specified width
  • A column element with specified width sets the width of the column, even if the first-row cell has a specified width.
Fixed table layout - specified column-group width
  • Specified column-group width is ignored in fixed table layout.
Fixed table layout - specified column width overrides specified column-group width
  • A column that has both a column width and column-group width specified will use its column specified width.
Fixed table layout - specified cell width overrides specified column-group width
  • A column that has both a cell width and column-group width specified will use its cell specified width.
Fixed table width is maximum between table and sum of column 'width' (sum of columns' widths wins)
  • A fixed layout table's width will be the sum of its columns' widths if that number is greater than the table's specified width.
17.5.2.2 Automatic table layout
Testing percent widths of kids of anonymous table cells
  • Percentage width kids of anonymous cells should use anonymous cell as containing block
17.5.3 Table height algorithms
Table height of 'auto' equals sum of row heights, cell spacing and borders
  • A table height of 'auto' equals the sum of the row heights plus any cell spacing and borders.
A
Specified table height is treated as minimum height
  • A specified table height value is treated as the minimum height of the table.
A
Specified row height is treated as minimum row height
  • A specified row height value is treated as the minimum height of the row.
A
Specifying 'auto' height on a row assigns it its minimum content height
  • This tests that setting 'height: auto' on a row assigns the row its minimum content height.
A
Setting a percentage 'height' on cell computes to 'auto'
  • A percentage 'height' value on a table cell computes to 'auto'.
A
Setting a percentage 'height' on row computes to 'auto'
  • A percentage 'height' value on a row computes to 'auto'.
A
Percentage 'height' on a row group computes to 'auto'
  • A percentage 'height' value on a row group computes to 'auto'.
A
Height of a cell is maximum between its specified 'height' and content minimum height
  • The height of a cell is the maximum between its specified 'height' and content minimum height.
A
Height value of 'auto' on a cell assigns it its content minimum height
  • A 'height' value of 'auto' on a cell assigns it its content minimum height.
A
Sum of row heights of a spanning cell must be great enough to encompass the full cell
  • The sum of row heights for a spanning cell are great enough to encompass the full cell.
A
Vertical-align set to 'baseline' aligns the cell content baseline with baseline of the row
  • A cell with Vertical-align set to 'baseline' aligns the cell's content baseline with the baseline of the row.
Vertical-align set to 'baseline' with a spanning cell
  • A spanning cell with Vertical-align set to 'baseline' aligns the cell's content baseline (which is the bottom of the first line of text or in-flow content) with the baseline of the first of the rows it spans.
Vertical-align set to 'top' aligns cell content to the top of the cell
  • A cell with Vertical-align set to 'top' aligns a cell's content to the top of the cell.
Vertical-align set to 'top' with a spanning cell
  • A spanning cell with Vertical-align set to 'top' aligns the cell's content to the top of the first row that it spans.
Vertical-align set to 'bottom' aligns cell content to the bottom of the cell
  • A cell with Vertical-align set to 'bottom' aligns the cell's content to the bottom of the cell.
Vertical-align set to 'bottom' with a spanning cell
  • A spanning cell with Vertical-align set to 'bottom' aligns the cell's content to the bottom of the last row it spans.
Vertical-align set to 'middle' aligns content to the middle of the cell
  • A cell with Vertical-align set to 'middle' aligns cell content in the middle of the cell.
Vertical-align set to 'middle' with a spanning cell
  • A spanning cell with 'vertical-align' set to 'middle' aligns content to the vertical center of the rows it spans.
Cell with 'vertical-align: sub' renders as 'vertical-align: baseline'
  • A cell with 'vertical-align: sub' renders as if the value were 'baseline'.
Cell with 'vertical-align: super' renders as 'vertical-align: baseline'
  • A cell with 'vertical-align: super' renders as if the value were 'baseline'.
Cell with 'vertical-align: text-top' renders as 'vertical-align: baseline'
  • A cell with 'vertical-align: text-top' renders as if the value were 'baseline'.
Cell with 'vertical-align: text-bottom' renders as 'vertical-align: baseline'
  • A cell with 'vertical-align: text-bottom' renders as if the value were 'baseline'.
Cell with 'vertical-align: [length]' renders as 'vertical-align: baseline'
  • A cell with 'vertical-align: [length]' renders as if the value were 'baseline'.
Cell with 'vertical-align: [percentage]' renders as 'vertical-align: baseline'
  • A cell with 'vertical-align: [percentage]' renders as if the value were 'baseline'.
Finding the baseline of a cell
  • The baseline of a cell is the baseline of the first in-flow line box in the cell or first in-flow table-row in the cell, whichever comes first.
Finding the baseline of a cell when no in-flow lines or rows
  • The baseline of a cell is determined by the bottom content edge of a cell when in-flow line boxes and table rows are not present.
In-flow boxes are considered scrolled to origin position when finding a baseline
  • In-flow boxes are considered to be scrolled to their origin position when finding a baseline.
Baseline of a cell might end up below its bottom border
  • The baseline of a cell may end up below its bottom border (modified example from spec section 17.5.3).
A
Table cells with different 'vertical-align' values
  • A table can have cells with different 'vertical-align' values.
Cell boxes smaller than their rows receive extra padding
  • A cell box that is smaller than height of its row receives extra top or bottom padding.
A
CSS Test Suite: Table baseline and caption
  • A table caption does not set the baseline for a table.
CSS Test Suite: Inline-table baseline and caption
  • A table caption does not set the baseline for an inline-table.
17.5.4 Horizontal alignment in a column
Horizontal alignment in a column 'text-align' set to 'left'
  • The 'text-align' property horizontally aligns cell content.
Horizontal alignment in a column 'text-align' set to 'right'
  • The 'text-align' property horizontally aligns cell content.
Horizontal alignment in a column 'text-align' set to 'center'
  • The 'text-align' property horizontally aligns cell content.
Horizontal alignment in a column 'text-align' set to 'justify'
  • The 'text-align' property horizontally aligns cell content.
Horizontal alignment in a column 'text-align' set to 'inherit' ('center')
  • The 'text-align' property horizontally aligns cell content.
17.5.5 Dynamic row and column effects
Row and the 'visibility' property
  • A 'visibility' value of 'collapse' applies to table rows.
Row group and the 'visibility' property
  • The 'visibility' value of 'collapse' applies to table row groups.
A spanning cell that intersects a 'visibility: collapse' row
  • The contents of a cell which spans through a collapsed row are clipped.
A spanning cell that originates from a 'visibility: collapse' row
  • A row-spanning cell which originates in a collapsed row is completely collapsed along with its row.
17.6 Borders
Border-collapse set to 'collapse'
  • A table with 'border-collapse' set to 'collapse' collapses the borders between its cells.
Border-collapse set to 'collapse'
  • A table with 'border-collapse' set to 'collapse' collapses the borders between its cells.
Border-collapse set to 'separate'
  • A table with 'border-collapse' set to 'separate' separates the borders between its cells.
Border-collapse set to 'separate'
  • A table with 'border-collapse' set to 'separate' separates the borders between its cells.
Border-collapse set to 'inherit'
  • A table can inherit its 'border-collapse' behavior from its parent container.
Border-collapse set to 'inherit'
  • A table can inherit its 'border-collapse' behavior from its parent container.
Border-collapse and 'display: inline' elements
  • Border-collapse does not apply to 'display: inline' elements.
Border-collapse and 'display: inline' elements
  • Border-collapse does not apply to 'display: inline' elements.
Border-collapse and 'display: block' elements
  • Border-collapse does not apply to 'display: block' elements.
Border-collapse and 'display: block' elements
  • Border-collapse does not apply to 'display: block' elements.
Border-collapse and 'display: list-item' elements
  • Border-collapse and 'display: list-item' elements.
Border-collapse and 'display: list-item' elements
  • Border-collapse and 'display: list-item' elements.
Border-collapse and 'display: run-in' elements
  • Border-collapse does not apply to 'display: run-in' elements.
Border-collapse and 'display: run-in' elements
  • Border-collapse does not apply to 'display: run-in' elements.
Border-collapse and 'display: inline-block' elements
  • Border-collapse does not apply to 'display: inline-block' elements.
Border-collapse and 'display: inline-block' elements
  • Border-collapse does not apply to 'display: inline-block' elements.
Border-collapse and 'display: table' elements
  • Border-collapse applies to 'display: table' elements.
Border-collapse and 'display: table' elements
  • Border-collapse applies to 'display: table' elements.
Border-collapse and 'display: inline-table' elements
  • Border-collapse applies to 'display: inline-table' elements.
Border-collapse and 'display: inline-table' elements
  • Border-collapse applies to 'display: inline-table' elements.
Border-collapse and 'display: table-row-group' elements
  • Border-collapse does not apply to 'display: table-row-group' elements.
Border-collapse and 'display: table-row-group' elements
  • Border-collapse does not apply to 'display: table-row-group' elements.
Border-collapse and 'display: table-header-group' elements
  • Border-collapse does not apply to 'display: table-header-group' elements.
Border-collapse and 'display: table-header-group' elements
  • Border-collapse does not apply to 'display: table-header-group' elements.
Border-collapse and 'display: table-footer-group' elements
  • Border-collapse does not apply to 'display: table-footer-group' elements.
Border-collapse and 'display: table-footer-group' elements
  • Border-collapse does not apply to 'display: table-footer-group' elements.
Border-collapse and 'display: table-row' elements
  • Border-collapse does not apply to 'display: table-row' elements.
Border-collapse and 'display: table-row' elements
  • Border-collapse does not apply to 'display: table-row' elements.
Border-collapse and 'display: table-column' elements
  • Border-collapse does not apply to 'display: table-column' elements.
Border-collapse and 'display: table-column' elements
  • Border-collapse does not apply to 'display: table-column' elements.
Border-collapse and 'display: table-column-group' elements
  • Border-collapse does not apply to 'display: table-column-group' elements.
Border-collapse and 'display: table-column-group' elements
  • Border-collapse does not apply to 'display: table-column-group' elements.
Border-collapse and 'display: table-cell' elements
  • Border-collapse does not apply to 'display: table-cell' elements.
Border-collapse and 'display: table-cell' elements
  • Border-collapse does not apply to 'display: table-cell' elements.
Border-collapse and 'display: table-caption' elements
  • Border-collapse does not apply to 'display: table-caption' elements.
Border-collapse and 'display: table-caption' elements
  • Border-collapse does not apply to 'display: table-caption' elements.
Border-collapse and 'display: none' elements
  • Border-collapse does not apply to 'display: none' elements.
Border-collapse and 'display: none' elements
  • Border-collapse does not apply to 'display: none' elements.
Border-collapse and 'display: inherit' elements
  • Border-collapse does not apply to 'display: inherit' elements which do not inherit the value of 'table' or 'inline-table'.
Border-collapse and 'display: inherit' elements
  • Border-collapse does not apply to 'display: inherit' elements which do not inherit the value of 'table' or 'inline-table'.
Border-collapse is inherited by default
  • Border-collapse is inherited by default.
Border-collapse is inherited by default
  • Border-collapse is inherited by default.
Initial value of border-collapse
  • The initial value of border-collapse is 'separate'.
Initial value of border-collapse
  • The initial value of border-collapse is 'separate'.
border-collapse in bidi context - border-right
  • Collapsed borders should behave the same way in ltr and rtl contexts
border-collapse in bidi context - border-left
  • Collapsed borders should behave the same way in ltr and rtl contexts
border-collapse in bidi context - border-top
  • Collapsed borders should behave the same way in ltr and rtl contexts
border-collapse in bidi context - border-bottom
  • Collapsed borders should behave the same way in ltr and rtl contexts
17.6.1 The separated borders model
Border-spacing using pixels with a minimum minus one value, -1px
  • Setting border-spacing to a value below the minimum in pixels falls back to the default value.
Border-spacing using pixels with a minimum value, 0px
  • Border-spacing can be set to the minimum value with pixels.
A
Border-spacing using pixels with a minimum plus one value, 1px
  • Border-spacing can be set one above the minimum in pixels.
A
Border-spacing set to zero using pixels with a minus sign, -0px
  • Border-spacing can be set to the minimum value, using zero with a minus sign, with pixels.
A
Border-spacing set to zero using pixels with a plus sign, +0px
  • Border-spacing can be set to the minimum value, using zero with a plus sign, with pixels.
A
Border-spacing using pixels with a nominal value, 96px
  • Border-spacing can be set to nominal length in pixels.
A
Border-spacing using pixels with a nominal value (with plus sign), +96px
  • Border-spacing can be set to a nominal length (with plus sign) in pixels.
A
Border-spacing using points with a minimum minus one value, -1pt
  • Setting border-spacing to a value below the minimum in points falls back to the default value.
Border-spacing using points with a minimum value, 0pt
  • Border-spacing can be set to the minimum value with points.
A
Border-spacing using points with a minimum plus one value, 1pt
  • Border-spacing can be set one above the minimum in points.
A
Border-spacing set to zero using points with a negative sign, -0pt
  • Border-spacing can be set to the minimum value, using zero with a negative sign, with points.
A
Border-spacing set to zero using points with a plus sign, +0pt
  • Border-spacing can be set to the minimum value, using zero with a plus sign, with points.
A
Border-spacing using points with a nominal value, 72pt
  • Border-spacing can be set to nominal length in points.
A
Border-spacing using points with a nominal value with a plus sign, +72pt
  • Border-spacing can be set to a nominal length (with plus sign) in points.
A
Border-spacing using picas with a minimum minus one value, -1pc
  • Setting border-spacing to a value below the minimum in picas falls back to the default value.
Border-spacing set to zero using picas, 0pc
  • Border-spacing can be set to the minimum value with picas.
A
Border-spacing using picas with a minimum plus one value, 1pc
  • Border-spacing can be set one above the minimum in picas.
A
Border-spacing set to zero using picas with a negative sign, -0
  • Border-spacing can be set to the minimum value, using zero with a negative sign, with picas.
A
Border-spacing set to zero using picas with a plus sign, +0
  • Border-spacing can be set to the minimum value, using zero with a plus sign, with picas.
A
Border-spacing using picas with a nominal value, 6pc
  • Border-spacing can be set to nominal length in picas.
A
Border-spacing using picas with a nominal value (with plus sign), +6pc
  • Border-spacing can be set to a nominal length (with plus sign) in picas.
A
Border-spacing using centimeters with a minimum minus one value, -1cm
  • Setting border-spacing to a value below the minimum in centimeters falls back to the default value.
Border-spacing using centimeters with a minimum value, 0cm
  • Border-spacing can be set to the minimum value with centimeters.
A
Border-spacing using centimeters with a minimum plus one value, 1cm
  • Border-spacing can be set one above the minimum in centimeters.
A
Border-spacing set to zero using centimeters with a minus sign, -0cm
  • Border-spacing can be set to the minimum value, using zero with a minus sign, with centimeters.
A
Border-spacing set to zero using centimeters with a plus sign, +0cm
  • Border-spacing can be set to the minimum value, using zero with a plus sign, with centimeters.
A
Border-spacing using centimeters with a nominal value, 2.54cm
  • Border-spacing can be set to nominal length in centimeters.
A
Border-spacing using centimeters with a nominal value (with plus sign), +2.54cm
  • Border-spacing can be set to a nominal length (with plus sign) in centimeters.
A
Border-spacing using millimeters with a minimum minus one value, -1mm
  • Setting border-spacing to a value below the minimum in millimeters falls back to the default value.
Border-spacing using millimeters with a minimum value, 0mm
  • Border-spacing can be set to the minimum value with millimeters.
A
Border-spacing using millimeters with a minimum plus one value, 1mm
  • Border-spacing can be set one above the minimum in millimeters.
A
Border-spacing set to zero using millimeters with a minus sign, -0mm
  • Border-spacing can be set to the minimum value, using zero with a negative sign, with millimeters.
A
Border-spacing set to zero using millimeters with a plus sign, +0mm
  • Border-spacing can be set to the minimum value, using zero with a plus sign, with millimeters.
A
Border-spacing using millimeters with a nominal value, 25.4mm
  • Border-spacing can be set to nominal length in millimeters.
A
Border-spacing using millimeters with a nominal value (with plus sign), +25.4mm
  • Border-spacing can be set to a nominal length (with plus sign) in millimeters.
A
Border-spacing using inches with a minimum minus one value, -1in
  • Setting border-spacing to a value below the minimum in inches falls back to the default value.
Border-spacing using inches with a minimum value, 0in
  • Border-spacing can be set to the minimum value with inches.
A
Border-spacing using inches with a minimum plus one value, 1in
  • Border-spacing can be set one above the minimum in inches.
A
Border-spacing set to zero using inches with a minus sign, -0in
  • Border-spacing can be set to the minimum value, using zero with a negative sign, with inches.
A
Border-spacing set to zero using inches with a plus sign, +0in
  • Border-spacing can be set to the minimum value, using zero with a plus sign, with inches.
A
Border-spacing using inches with a nominal value, 1in
  • Border-spacing can be set to nominal length in inches.
A
Border-spacing using inches with a nominal value (with plus sign), +1in
  • Border-spacing can be set to a nominal length (with plus sign) in inches.
A
Border-spacing using 'em' units with a minimum minus one value, -1em
  • Setting border-spacing to a value below the minimum in 'em' units falls back to the default value.
Border-spacing using 'em' units with a minimum value, 0em
  • Border-spacing can be set to the minimum value with 'em' units.
A
Border-spacing using 'em' units with a minimum plus one value, 1em
  • Border-spacing can be set one above the minimum in 'em' units.
A
Border-spacing set to zero using 'em' units with a minus sign, -0em
  • Border-spacing can be set to the minimum value, using zero with a minus sign, in 'em' units.
A
Border-spacing set to zero using 'em' units with a plus sign, +0em
  • Border-spacing can be set to the minimum value, using zero with a plus sign, in 'em' units.
A
Border-spacing using 'em' units with a nominal value, 6em
  • Border-spacing can be set to nominal length in 'em' units.
A
Border-spacing using 'em' units with a nominal value with a plus sign, +6em
  • Border-spacing can be set to a nominal length (with plus sign) in 'em' units.
A
Border-spacing using 'ex' units with a minimum minus one value, -1ex
  • Setting border-spacing to a value below the minimum in 'ex' units falls back to the default value.
Border-spacing using 'ex' units with a minimum value, 0ex
  • Border-spacing can be set to the minimum value in 'ex' units.
A
Border-spacing set to zero using 'ex' units with a minus sign, -0ex
  • Border-spacing can be set to the minimum value, using zero with a negative sign, in 'ex' units.
A
Border-spacing set to zero using 'ex' units with a plus sign, +0ex
  • Border-spacing can be set to the minimum value, using zero with plus sign, with 'ex' units.
A
Border-spacing using 'ex' units with a nominal value, 7.5ex
  • Border-spacing can be set to nominal length in 'ex' units.
A
Border-spacing using 'ex' units with a nominal value with a plus sign, +7.5ex
  • Border-spacing can be set to a nominal length (with plus sign) in 'ex' units.
A
Border-spacing set to zero with no units with a minus sign, -0
  • Border-spacing can be set to the minimum value with an integer, regardless of the negative sign on it.
A
Border-spacing set to zero with no units, 0
  • Border-spacing can be set to the minimum value with an integer.
A
Border-spacing set to zero with no units with a plus sign, +0
  • Border-spacing can be set to the minimum value with an integer, regardless of the positive sign on it.
A
Border-spacing set to inherit with one value, 1in
  • Verify that a table with 'border-spacing: inherit' uses its parent container's border-spacing value.
A
Border-spacing set to inherit with two values, 50px 5px
  • Verify that a table with 'border-spacing: inherit' uses both of its parent container's border-spacing values if two are specified.
A
Border-spacing: using two values, 5px 50px
  • Verify that a table can have two values specified by its border-spacing property.
A
Border-spacing and 'display: inline' elements
  • Border-spacing does not apply to 'display: inline' elements.
Border-spacing and 'display: block' elements
  • Border-spacing does not apply to 'display: block' elements.
Border-spacing and 'display: list-item' elements
  • Border-spacing does not apply to 'display: list-item' elements.
Border-spacing and 'display: run-in' elements
  • Border-spacing does not apply to 'display: run-in' elements.
Border-spacing and 'display: inline-block' elements
  • Border-spacing does not apply to 'display: inline-block' elements.
Border-spacing and 'display: table' elements
  • Border-spacing applies to 'display: table' elements.
Border-spacing and 'display: inline-table' elements
  • Border-spacing applies to 'display: inline-table' elements.
Border-spacing and 'display: table-row-group' elements
  • Border-spacing does not apply to 'display: table-row-group' elements.
Border-spacing and 'display: table-header-group' elements
  • Border-spacing does not apply to 'display: table-header-group' elements.
Border-spacing and 'display: table-footer-group' elements
  • Border-spacing does not apply to 'display: table-footer-group' elements.
Border-spacing and 'display: table-row' elements
  • Border-spacing does not apply to 'display: table-row' elements.
Border-spacing and 'display: table-column' elements
  • Border-spacing does not apply to 'display: table-column' elements.
Border-spacing and 'display: table-column-group' elements
  • Border-spacing does not apply to 'display: table-column-group' elements.
Border-spacing and 'display: table-cell' elements
  • Border-spacing does not apply to 'display: table-cell' elements.
Border-spacing and 'display: table-caption' elements
  • Border-spacing does not apply to 'display: table-caption' elements.
Border-spacing and 'display: none' elements
  • Border-spacing does not apply to 'display: none' elements.
Border-spacing and 'display: inherit' elements
  • Border-spacing does not apply to 'display: inherit' elements which do not inherit the value of 'table' or 'inline-table'.
Border-spacing is inherited by default
  • Border-spacing is inherited by default.
A
Initial value of border-spacing
  • Verifies that the initial value of border-spacing is '0'.
A
Negative 'border-spacing' values are ignored
  • The 'border-spacing' property ignores a negative value.
Applying the 'border-spacing' property to a 'frameset' element
  • The user agent may allow the 'border-spacing' property to be applied to an HTML/XHTML 'frameset' element (non-normative rule).
Distance between the table border and a bordering cell
  • The distance between table border and bordering cell equals table padding + cell's border spacing.
HTML/XHTML table width equation
  • The width of an HTML/XHTML table is the distance between the left and right table border edges.
Width of a table in separated borders mode
  • The width of a CSS table is the distance from the left inner padding edge to the right inner padding edge (including the border spacing but excluding padding and border).
Setting a 'border-spacing' width on a table
  • The border-spacing width can be specified for a table (example from spec section 17.6.1).
G
Row and column backgrounds in the separated borders model
  • Table row, column, row group and column group backgrounds are invisible in the space between borders.
separated borders model - rules="all"
  • In the border-collapse separate model, each cell has an individual border. The rules attribute defines which rules to draw between cells.
17.6.1.1 Borders and Backgrounds around empty cells: the 'empty-cells' property
Empty-cells set to 'show'
  • An 'empty-cells' value of 'show' allows cells without content to have visible backgrounds and borders.
Empty-cells set to 'hide'
  • An 'empty-cells' value of 'hide' prevents cells without content from having visible backgrounds and borders.
Empty-cells set to inherit
  • A cell can inherit its empty-cells behavior from its row parent container.
Empty-cells and 'display: inline' elements
  • Empty-cells does not apply to 'display: inline' elements.
Empty-cells and 'display: block' elements
  • Empty-cells does not apply to 'display: block' elements.
Empty-cells and 'display: list-item' elements
  • Empty-cells does not apply to 'display: list-item' elements.
Empty-cells and 'display: run-in' elements
  • Empty-cells does not apply to 'display: run-in' elements.
Empty-cells and 'display: inline-block' elements
  • Empty-cells does not apply to 'display: inline-block' elements.
Empty-cells and 'display: table' elements
  • Empty-cells does not apply to 'display: table' elements.
Empty-cells and 'display: inline-table' elements
  • Empty-cells does not apply to 'display: inline-table' elements.
Empty-cells and 'display: table-row-group' elements
  • Empty-cells does not apply to 'display: table-row-group' elements.
Empty-cells and 'display: table-header-group' elements
  • Empty-cells does not apply to 'display: table-header-group' elements.
Empty-cells and 'display: table-footer-group' elements
  • Empty-cells does not apply to 'display: table-footer-group' elements.
Empty-cells and 'display: table-row' elements
  • Empty-cells does not apply to 'display: table-row' elements.
Empty-cells and 'display: table-column' elements
  • Empty-cells does not apply to 'display: table-column' elements.
Empty-cells and 'display: table-column-group' elements
  • Empty-cells does not apply to 'display: table-column-group' elements.
Empty-cells and 'display: table-cell' elements
  • Empty-cells applies to 'display: table-cell' elements.
Empty-cells and 'display: table-caption' elements
  • Empty-cells does not apply to 'display: table-caption' elements.
Empty-cells and 'display: none' elements
  • Empty-cells does not apply to 'display: none' elements.
Empty-cells and 'display: inherit' elements
  • Empty-cells does not apply to 'display: inherit' elements which do not inherit the value of 'table-cell'.
Cells containing floating content are not considered empty
  • Cells that contain floating content, including empty elements, are not considered to be empty cells. The table under test actually contains two tests. The first cell tests floating content, and the second cell tests a floating empty element.
Cells containing empty element in-flow content are not considered empty
  • Cells that contain in-flow content (including empty elements) are not considered to be empty cells. The table under test really contains two tests--the first cell tests in-flow content, the second cell tests an empty in-flow element.
Cells with collapsed white space content are considered empty
  • Cells that contain in-flow content of white space which has been collapsed away by the 'white-space' property are considered to be empty cells.
Cells with non-collapsed white space content are not considered empty
  • Cells which contain in-flow content of white space which has not been collapsed away by the 'white-space' property are not considered to be empty cells.
Empty cells property in the collapsed borders model
  • The empty-cells property does not apply to tables with collapsed borders.
Empty-cells is inherited by default
  • Empty-cells is inherited by default.
Initial value of empty-cells
  • The initial value of empty-cells is 'show'.
Cell with hidden visibility content as an empty cell
  • A cell with 'visibility: hidden' is considered an empty cell.
17.6.2 The collapsing border model
Collapsing borders model row width equation (auto layout)
  • The user agent adheres to the collapsing border model row width equation in auto table layout.
Collapsing borders model row width equation (auto layout) - subsequent rows with wider borders variation
  • Rows which have wider borders than those of the first table row have their borders spill into the table margins.
Top table border width under collapsing borders model
  • The top border width of the table is half of the maximum collapsed top border width.
Tables under the collapsing borders model don't have padding
  • Padding doesn't apply to a table under the collapsing border model.
Table borders overflowing the table container
  • Borders that spill into a table margin can overflow that table's container.
Table borders overflowing the table container (rtl)
  • Borders that spill into a table margin can overflow that table's container.
Left table border width under collapsing borders model
  • The left border width of the table is half of the first cell's collapsed left border width.
Right table border width under collapsing borders model
  • The right border width of the table is half of the collapsed right border width of the last cell of the first row.
Bottom table border width under collapsing borders model
  • The bottom border width of the table is half of the maximum collapsed bottom border width.
All of a cell border can be specified
  • The borders for all four sides of a specific table cell can be specified under the collapsing border model.
Part of a cell border can be specified
  • The border for a specific table cell can be specified under the collapsing border model.
All of a row border can be specified
  • The borders for all four sides of a specific table row can be specified under the collapsing border model.
Part of a row border can be specified
  • The border for a specific table row can be specified under the collapsing border model.
All of a row group border can be specified
  • The borders for all four sides of a specific table row group can be specified under the collapsing border model.
Part of a row group border can be specified
  • The border for a specific table row group can be specified under the collapsing border model.
All of a column border can be specified
  • The borders for all four sides of a specific table column can be specified under the collapsing border model.
Part of a column border can be specified
  • The border of a specific table column can be specified under the collapsing border model.
All of a column group border can be specified
  • The borders of all four sides of a specific table column group can be specified under the collapsing border model.
Part of a column group border can be specified
  • The border of a specific table column group can be specified under the collapsing border model.
Table background edge in the collapsing borders model
  • The background edge of a table could start either behind the table's border or at its edge in the collapsing borders model (non-normative rule).
G
Table background edge in the separated borders model
  • The background edge of a table could start either behind the table's border or at its edge in the separated borders model (non-normative rule).
G
17.6.2.1 Border conflict resolution
Border Conflict Resolution (element) - cell vs. cell - element with highest priority is the dominant border
  • With adjacent cells of same border-style and width, border collapsing favors the cell furthest to the top and left (in a 'left-to-right' table).
Border Conflict Resolution (element) - cell vs. cell - element with highest priority is the dominant border (rtl table)
  • With adjacent cells of same border-style and width, border collapsing favors the cell furthest to the top right for a 'right-to-left' table.
Border Conflict Resolution (by element): cell in row - element with highest priority is the dominant border
  • With embedded elements (cell, row) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell vs. row - element with highest priority is the dominant border
  • With adjacent elements (cell, row) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell in row group - element with highest priority is the dominant border
  • With embedded elements (cell, row group) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell vs. row group - element with highest priority is the dominant border
  • With adjacent elements (cell, row group) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell in column - element with highest priority is the dominant border
  • With embedded elements (cell, column) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell vs. column - element with highest priority is the dominant border
  • With adjacent elements (cell, column) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell in column group - element with highest priority is the dominant border
  • With embedded elements (cell, column group) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell vs. column group - element with highest priority is the dominant border
  • With adjacent elements (cell, column group) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): cell vs. table - element with highest priority is the dominant border
  • With embedded elements (cell, table) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): row vs. cell - element with highest priority is the dominant border
  • With adjacent elements (row, cell) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): row vs. row - element with highest priority is the dominant border
  • With adjacent elements (row, row) of same border-style and width, border collapsing favors the row furthest to the top.
Border Conflict Resolution (by element): row in row group - element with highest priority is the dominant border
  • With embedded elements (row, row group) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): row vs. row group - element with highest priority is the dominant border
  • With adjacent elements (row, row group) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): row vs. column - element with highest priority is the dominant border
  • With embedded elements (row, column) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): row vs. column group - element with highest priority is the dominant border
  • With embedded elements (row, column group) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): row vs. table - element with highest priority is the dominant border
  • With embedded elements (row, table) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): row group vs. cell - element with highest priority is the dominant border
  • With embedded elements (row group, cell) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): row group vs. row - element with highest priority is the dominant border
  • With adjacent elements (row group, row) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): row group vs. row group - element with highest priority is the dominant border
  • With adjacent elements (row group, row group) of same border-style and width, border collapsing favors the row group furthest to the top.
Border Conflict Resolution (by element): row group vs. column - element with highest priority is the dominant border
  • With embedded elements (row group, column) of same border-style and width, border collapsing favors the row group.
Border Conflict Resolution (by element): row group vs. column group - element with highest priority is the dominant border
  • With embedded elements (row group, column group) of same border-style and width, border collapsing favors the row group.
Border Conflict Resolution (by element): row group vs. table - element with highest priority is the dominant border
  • With embedded elements (row group, table) of same border-style and width, border collapsing favors the row group.
Border Conflict Resolution (by element): column vs. cell - element with highest priority is the dominant border
  • With adjacent elements (column, cell) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): column vs. row - element with highest priority is the dominant border
  • With adjacent elements (column, row) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): column vs. row group - element with highest priority is the dominant border
  • With embedded elements (column, row group) of same border-style and width, border collapsing favors the row group.
Border Conflict Resolution (by element): column vs. column - element with highest priority is the dominant border
  • With adjacent elements (column, column) of same border-style and width, border collapsing favors the column farthest to the left (in a 'left-to-right' table.
Border Conflict Resolution (by element): column vs. column - element with highest priority is the dominant border (rtl table)
  • With adjacent elements (column, column) of same border-style and width, border collapsing favors the column farthest to the right in a 'right-to-left' table.
Border Conflict Resolution (by element): column in column group - element with highest priority is the dominant border
  • With embedded elements (column, column group) of same border-style and width, border collapsing favors the column.
Border Conflict Resolution (by element): column vs. column group - element with highest priority is the dominant border
  • With adjacent elements (column, column group) of same border-style and width, border collapsing favors the column.
Border Conflict Resolution (by element): column vs. table - element with highest priority is the dominant border
  • With embedded elements (column, table) of same border-style and width, border collapsing favors the column.
Border Conflict Resolution (by element): column group vs. cell - element with highest priority is the dominant border
  • With adjacent elements (column group, cell) of same border-style and width, border collapsing favors the cell.
Border Conflict Resolution (by element): column group vs. row - element with highest priority is the dominant border
  • With embedded elements (column group, row) of same border-style and width, border collapsing favors the row.
Border Conflict Resolution (by element): column group vs. row group - element with highest priority is the dominant border
  • With embedded elements (column group, row group) of same border-style and width, border collapsing favors the row group.
Border Conflict Resolution (by element): column group vs. column - element with highest priority is the dominant border
  • With adjacent elements (column group, column) of same border-style and width, border collapsing favors the column.
Border Conflict Resolution (by element): column group vs. column group - element with highest priority is the dominant border
  • With adjacent elements (column group, column group) of same border-style and width, border collapsing favors the column group farthest to the left (in a 'ltr' table).
Border Conflict Resolution (by element): column group vs. column group - element with highest priority is the dominant border (rtl table)
  • With adjacent elements (column group, column group) of same border-style and width, border collapsing favors the column group farthest to the right in a 'right-to-left' table.
Border Conflict Resolution (by element): column group vs. table - element with highest priority is the dominant border
  • With embedded elements (column group, table) of same border-style and width, border collapsing favors the column group.
Border conflict resolution - borders are collapsed according to precdence rules (example 1)
  • Borders are collapsed according to the precedence rules (example from spec section 17.6.2.1).
G
Border conflict resolution - borders are collapsed according to the precedence rules (example 2)
  • Borders are collapsed according to the precedence rules (example from spec section 17.6.2.1).
G
Cell borders are set by a cell
  • Borders on every edge (top, right, bottom, left) of a cell can be set by the cell's border properties, which can vary in width, style and color.
Cell borders are set by a row
  • Borders on every edge (top, right, bottom, left) of a cell can be set by the row's border properties, which can vary in width, style and color.
Cell borders are set by a row group
  • Borders on every edge (top, right, bottom, left) of a cell can be set by the row group's border properties, which can vary in width, style and color.
Cell borders are set by a column
  • Borders on every edge (top, right, bottom, left) of a cell can be set by the column's border properties, which can vary in width, style and color.
Cell borders are set by a column group
  • Borders on every edge (top, right, bottom, left) of a cell can be set by the column group's border properties, which can vary in width, style and color.
Cell borders are set by the table
  • Borders on every edge (top, right, bottom, left) of a cell can be set by the table's border properties, which can vary in width, style and color.
Border Conflict Resolution (by border style): 'dashed' vs. 'dashed' - border with highest priority border style should dominate
  • Only one 'dashed' border appears when two 'dashed' borders of the same size are collapsed together.
Border Conflict Resolution (by border style): 'dashed' vs. 'dotted' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'dotted' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'dashed' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'groove' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'dashed' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'inset' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'inset' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'none' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'dashed' vs. 'outset' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'outset' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'ridge' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'dashed' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'dashed' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'dashed' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'dotted' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'dotted' - border with highest priority border style should dominate
  • Only one 'dotted' border appears when two 'dotted' borders of the same size are collapsed together.
Border Conflict Resolution (by border style): 'dotted' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'dotted' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'groove' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'dotted' border.
Border Conflict Resolution (by border style): 'dotted' vs. 'inset' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'inset' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'none' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'dotted' vs. 'outset' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'outset' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'ridge' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'dotted' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'dotted' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'dashed' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'dashed' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'dotted' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'dotted' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'double' - border with highest priority border style should dominate
  • Only a single 'double' border appears when two 'double' borders of the same size are collapsed together.
Border Conflict Resolution (by border style): 'double' vs. 'groove' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'double' border.
Border Conflict Resolution (by border style): 'double' vs. 'inset' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'inset' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'none' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'none' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'outset' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'outset' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'ridge' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'double' vs. 'solid' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'solid' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'dashed' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'dotted' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'groove' - border with highest priority border style should dominate
  • Only a single 'groove' border appears when two of 'groove' borders of the same size are collapsed together.
Border Conflict Resolution (by border style): 'groove' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'groove' border.
Border Conflict Resolution (by border style): 'groove' vs. 'inset' - border with highest priority border style should dominate
  • The 'groove' border is the dominant border when it is collapsed with a 'inset' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'none' - border with highest priority border style should dominate
  • The 'groove' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'groove' vs. 'outset' - border with highest priority border style should dominate
  • The 'outset' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'ridge' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'groove' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'hidden' vs. 'dashed' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'dashed' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'dotted' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'dotted' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'double' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'double' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'groove' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'groove' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border collapsed with a 'hidden' border yields no border.
Border Conflict Resolution (by border style): 'hidden' vs. 'inset' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'inset' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'none' - border with highest priority border style should dominate
  • A 'hidden' border collapsed with a 'none' border yields no border.
Border Conflict Resolution (by border style): 'hidden' vs. 'outset' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'outset' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'ridge' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'ridge' border.
Border Conflict Resolution (by border style): 'hidden' vs. 'solid' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'solid' border.
Border Conflict Resolution (by border style): 'inset' vs. 'dashed' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'inset' vs. 'dotted' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'inset' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'inset' vs. 'groove' - border with highest priority border style should dominate
  • The 'groove' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'inset' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with an 'inset' border.
Border Conflict Resolution (by border style): 'inset' vs. 'inset' - border with highest priority border style should dominate
  • Only one 'inset' border appears when two 'inset' borders of the same size are collapsed.
Border Conflict Resolution (by border style): 'inset' vs. 'none' - border with highest priority border style should dominate
  • The 'inset' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'inset' vs. 'outset' - border with highest priority border style should dominate
  • The 'outset' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'inset' vs. 'ridge' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'inset' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'none' vs. 'dashed' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'none' vs. 'dotted' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'none' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'none' vs. 'groove' - border with highest priority border style should dominate
  • The 'groove' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'none' vs. 'hidden' - border with highest priority border style should dominate
  • A 'none' border collapsed with a 'hidden' border yields no border.
Border Conflict Resolution (by border style): 'none' vs. 'inset' - border with highest priority border style should dominate
  • The 'inset' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'none' vs. 'none' - border with highest priority border style should dominate
  • A 'none' border collapsed with a 'none' border yields no border.
Border Conflict Resolution (by border style): 'none' vs. 'outset' - border with highest priority border style should dominate
  • The 'outset' border is the dominant border when it is collapsed with a 'none' border of the same size.
Border Conflict Resolution (by border style): 'none' vs. 'ridge' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'none' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'outset' vs. 'dashed' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'outset' border of the same size.
Border Conflict Resolution (by border style): 'outset' vs. 'dotted' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with an 'outset' border of the same size.
Border Conflict Resolution (by border style): 'outset' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with an 'outset' border of the same size.
Border Conflict Resolution (by border style): 'outset' vs. 'groove' - border with highest priority border style should dominate
  • The 'outset' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'outset' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with an 'outset' border.
Border Conflict Resolution (by border style): 'outset' vs. 'inset' - border with highest priority border style should dominate
  • The 'outset' border is the dominant border when it is collapsed with an 'inset' border of the same size.
Border Conflict Resolution (by border style): 'outset' vs. 'none' - border with highest priority border style should dominate
  • The 'outset' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'outset' vs. 'outset' - border with highest priority border style should dominate
  • Only one 'outset' border appears when two 'outset' borders of the same size are collapsed together.
Border Conflict Resolution (by border style): 'outset' vs. 'ridge' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with an 'outset' border of the same size.
Border Conflict Resolution (by border style): 'outset' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with an 'outset' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'dashed' - border with highest priority border style should dominate
  • The 'dashed' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'dotted' - border with highest priority border style should dominate
  • The 'dotted' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'groove' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'ridge' border.
Border Conflict Resolution (by border style): 'ridge' vs. 'inset' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with a 'inset' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'none' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'ridge' vs. 'outset' - border with highest priority border style should dominate
  • The 'ridge' border is the dominant border when it is collapsed with an 'outset' border of the same size.
Border Conflict Resolution (by border style): 'ridge' vs. 'ridge' - border with highest priority border style should dominate
  • Only one 'ridge' border appears when two 'ridge' borders of the same size are collapsed together.
Border Conflict Resolution (by border style): 'ridge' vs. 'solid' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'dashed' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'dashed' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'dotted' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'dotted' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'double' - border with highest priority border style should dominate
  • The 'double' border is the dominant border when it is collapsed with a 'solid' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'groove' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'groove' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'hidden' - border with highest priority border style should dominate
  • The 'hidden' border is the dominant border when it is collapsed with a 'solid' border.
Border Conflict Resolution (by border style): 'solid' vs. 'inset' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'inset' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'none' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'none' border.
Border Conflict Resolution (by border style): 'solid' vs. 'outset' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'outset' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'ridge' - border with highest priority border style should dominate
  • The 'solid' border is the dominant border when it is collapsed with a 'ridge' border of the same size.
Border Conflict Resolution (by border style): 'solid' vs. 'solid' - border with highest priority border style should dominate
  • Only a single 'solid' border appears when two 'solid' borders of the same size are collapsed together.
Border Conflict Resolution (by border width): 'dashed' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'dashed' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dashed' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'dotted' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'dotted' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'double' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'double' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'groove' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'groove' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'hidden' vs. 'dashed' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'dotted' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'double' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'groove' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'inset' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'none' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'outset' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'ridge' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'hidden' vs. 'solid' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'inset' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'inset' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'inset' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'none' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'none' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'outset' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'outset' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'ridge' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'none' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'ridge' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'dashed' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'dotted' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'double' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'groove' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'hidden' - a border style of 'hidden' is always the dominant border
  • The 'hidden' border style takes precedence over all style and width definitions.
Border Conflict Resolution (by border width): 'solid' vs. 'inset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'none' - border style with largest width should be the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'outset' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'ridge' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (by border width): 'solid' vs. 'solid' - border style with largest width is the dominant border
  • The widest border is dominant when two cell borders collapse.
Border Conflict Resolution (width) - hidden/hidden
Border Conflict Resolution (width) - hidden/double
Border Conflict Resolution (width) - hidden/solid
Border Conflict Resolution (width) - hidden/dashed
Border Conflict Resolution (width) - hidden/dotted
Border Conflict Resolution (width) - hidden/ridge
Border Conflict Resolution (width) - hidden/outset
Border Conflict Resolution (width) - hidden/groove
Border Conflict Resolution (width) - hidden/inset
Border Conflict Resolution (width) - hidden/none
Border Conflict Resolution (width) - double/hidden
Border Conflict Resolution (width) - double/double
Border Conflict Resolution (width) - double/solid
Border Conflict Resolution (width) - double/dashed
Border Conflict Resolution (width) - double/dashed
Border Conflict Resolution (width) - double/ridge
Border Conflict Resolution (width) - double/outset
Border Conflict Resolution (width) - double/groove
Border Conflict Resolution (width) - double/inset
Border Conflict Resolution (width) - double/none
Border Conflict Resolution (width) - solid/hidden
Border Conflict Resolution (width) - solid/double
Border Conflict Resolution (width) - solid/solid
Border Conflict Resolution (width) - solid/dashed
Border Conflict Resolution (width) - solid/dotted
Border Conflict Resolution (width) - solid/ridge
Border Conflict Resolution (width) - solid/outset
Border Conflict Resolution (width) - solid/groove
Border Conflict Resolution (width) - solid/inset
Border Conflict Resolution (width) - solid/none
Border Conflict Resolution (width) - dashed/hidden
Border Conflict Resolution (width) - dashed/double
Border Conflict Resolution (width) - dashed/solid
Border Conflict Resolution (width) - dashed/dashed
Border Conflict Resolution (width) - dashed/dotted
Border Conflict Resolution (width) - dashed/ridge
Border Conflict Resolution (width) - dashed/outset
Border Conflict Resolution (width) - dashed/groove
Border Conflict Resolution (width) - dashed/inset
Border Conflict Resolution (width) - dashed/none
Border Conflict Resolution (width) - dotted/hidden
Border Conflict Resolution (width) - dotted/double
Border Conflict Resolution (width) - dotted/solid
Border Conflict Resolution (width) - dotted/dashed
Border Conflict Resolution (width) - dotted/dotted
Border Conflict Resolution (width) - dotted/ridge
Border Conflict Resolution (width) - dotted/outset
Border Conflict Resolution (width) - dotted/groove
Border Conflict Resolution (width) - dotted/inset
Border Conflict Resolution (width) - dotted/none
Border Conflict Resolution (width) - ridge/hidden
Border Conflict Resolution (width) - ridge/double
Border Conflict Resolution (width) - ridge/solid
Border Conflict Resolution (width) - ridge/dashed
Border Conflict Resolution (width) - ridge/dotted
Border Conflict Resolution (width) - ridge/ridge
Border Conflict Resolution (width) - ridge/outset
Border Conflict Resolution (width) - ridge/groove
Border Conflict Resolution (width) - ridge/inset
Border Conflict Resolution (width) - ridge/none
Border Conflict Resolution (width) - outset/hidden
Border Conflict Resolution (width) - outset/double
Border Conflict Resolution (width) - outset/solid
Border Conflict Resolution (width) - outset/dashed
Border Conflict Resolution (width) - outset/dotted
Border Conflict Resolution (width) - outset/ridge
Border Conflict Resolution (width) - outset/outset
Border Conflict Resolution (width) - outset/groove
Border Conflict Resolution (width) - outset/inset
Border Conflict Resolution (width) - outset/none
Border Conflict Resolution (width) - groove/hidden
Border Conflict Resolution (width) - groove/double
Border Conflict Resolution (width) - groove/solid
Border Conflict Resolution (width) - groove/dashed
Border Conflict Resolution (width) - groove/dotted
Border Conflict Resolution (width) - groove/ridge
Border Conflict Resolution (width) - groove/outset
Border Conflict Resolution (width) - groove/groove
Border Conflict Resolution (width) - groove/inset
Border Conflict Resolution (width) - groove/none
Border Conflict Resolution (width) - inset/hidden
Border Conflict Resolution (width) - inset/double
Border Conflict Resolution (width) - inset/solid
Border Conflict Resolution (width) - inset/dashed
Border Conflict Resolution (width) - inset/dotted
Border Conflict Resolution (width) - inset/ridge
Border Conflict Resolution (width) - inset/outset
Border Conflict Resolution (width) - inset/groove
Border Conflict Resolution (width) - inset/inset
Border Conflict Resolution (width) - inset/none
Border Conflict Resolution (width) - none/hidden
Border Conflict Resolution (width) - none/double
Border Conflict Resolution (width) - none/solid
Border Conflict Resolution (width) - none/dashed
Border Conflict Resolution (width) - none/dotted
Border Conflict Resolution (width) - none/ridge
Border Conflict Resolution (width) - inset/outset
Border Conflict Resolution (width) - none/groove
Border Conflict Resolution (width) - none/inset
Border Conflict Resolution (width) - none/none
border conflict resolution - border-style: hidden applied to table-row
  • A table element with the 'border-style' value of 'hidden' should suppress all borders for such element.
border conflict resolution - border-style: hidden applied to table-column-group
  • A table element with the 'border-style' value of 'hidden' should suppress all borders for such element.
border conflict resolution - border-style: hidden applied to table-column
  • A table element with the 'border-style' value of 'hidden' should suppress all borders for such element.
border conflict resolution - border-style: hidden applied to table-row-group
  • A table element with the 'border-style' value of 'hidden' should suppress all borders for such element.
border conflict resolution - border-style: hidden applied to table-footer-group
  • A table element with the 'border-style' value of 'hidden' should suppress all borders for such element.
border conflict resolution - border-style: hidden applied to table-header-group
  • A table element with the 'border-style' value of 'hidden' should suppress all borders for such element.
17.6.3 Border styles
Table-Specific Border Style Behavior (separated border model/inset)
  • In the separated border model, the 'inset' border style makes its box looks like it is embedded in the canvas.
Table-Specific Border Style Behavior (collapsing border model/inset)
  • In the collapsing border model, the 'inset' border style looks the same as the 'ridge' border style.
Table-Specific Border Style Behavior (separated border model/outset)
  • In the separated border model, the 'outset' border style makes its box looks like it is standing off of the canvas.
Table-Specific Border Style Behavior (collapsing border model/outset)
  • In the collapsing border model, the 'outset' border style looks the same as the 'groove' border style.