div+css - CSS标准 - 17.6.2 The collapsing border model压缩边框模型

17.6.2 The collapsing border model

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group. Borders for HTML's "rule" attribute can be specified this way.

Borders are centered on the grid lines between the cells. User agents must find a consistent rule for rounding off in the case of an odd number of discrete units (screen pixels, printer dots).

The diagram below shows how the width of the table, the widths of the borders, the padding, and the cell width interact. Their relation is given by the following equation, which holds for every row of the table:

row-width = (0.5 * border-width₀) + padding-left₁ + width₁ + padding-right₁ + border-width₁ + padding-left₂ +...+ padding-right_n + (0.5 * border-width_n)

Here n is the number of cells in the row, padding-left_i and padding-right_i refer to the left (resp., right) padding of cell i, and border-width_i refers to the border between cells i and i + 1.

UAs must compute an initial left and right border width for the table by examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell's collapsed left border, and the right border width of the table is half of the last cell's collapsed right border. If subsequent rows have larger collapsed left and right borders, then any excess spills into the margin area of the table.

The top border width of the table is computed by examining all cells who collapse their top borders with the top border of the table. The top border width of the table is equal to half of the maximum collapsed top border. The bottom border width is computed by examining all cells whose bottom borders collapse with the bottom of the table. The bottom border width is equal to half of the maximum collapsed bottom border.

Any borders that spill into the margin are taken into account when determining if the table overflows some ancestor (see 'overflow').

   [D]

Schema showing the widths of cells and borders and the padding of cells.

Note that in this model, the width of the table includes half the table border. Also, in this model, a table doesn't have padding (but does have margins).

CSS 2.1 does not define where the edge of a background on a table element lies.

17.6.2.1 Border conflict resolution

In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style 'hidden' unconditionally turns the border off.

The following rules determine which border style "wins" in case of a conflict:

1. Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
2. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
3. If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.

Example(s):

The following example illustrates the application of these precedence rules. This style sheet:

table          { border-collapse: collapse;
                 border: 5px solid yellow; }
*#col1         { border: 3px solid black; }
td             { border: 1px solid red; padding: 1em; }
td.cell5       { border: 5px dashed blue; }
td.cell6       { border: 5px solid green; }

with this HTML source:

<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4 
    <TD class="cell5"> 5
    <TD class="cell6"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

would produce something like this:

   [D]

An example of a table with collapsed borders.

Example(s):

Here is an example of hidden collapsing borders:

   [D]

Table with two omitted internal borders.

HTML source:

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

[17.6.2 The collapsing border model压缩边框模型 - CSS标准文档]

http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

[border-collapse压缩边框 - IE文档]

http://msdn2.microsoft.com/en-us/library/ms533513.aspx

[div+css - 关键词]

div css

[div+css - 论坛]

http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/HTMLCSS/
http://groups.google.com/group/alt.html
http://groups.google.com/group/comp.infosystems.www.authoring.html
http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets

[div+css - 工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

The W3C Markup Validation Service:, http://validator.w3.org/

微软印刷技术 - 自由字体信息, TrueType, OpenType, ClearType:, http://www.microsoft.com/typography/default.mspx

微软印刷技术 - WEFT 3网页嵌入字体3, http://www.microsoft.com/typography/WEFT.mspx

微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 下载, http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

微软印刷技术 - WEFT 3 - 网页嵌入字体3 - 向导, http://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx

微 软印刷技术 - WEFT 3网页嵌入字体3 - Wizard向导 - Create font objects创建字体对象, http://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx#create

微 软印刷技术 - WEFT 3网页嵌入字体3 - Wizard向导 - Fonts to embed待嵌入字体, http://www.microsoft.com/typography/web/embedding/weft3/wizard.aspx#embed

[div+css - 常见问题]

较验div+css格式，http://validator.w3.org/
div+css的margin缩写方式
div+css的padding缩写方式
链接的:link,:visited,:hover,:active四种状态

div+css使用backgroundRepeat样式设置背景图片的显示方式, http://msdn2.microsoft.com/en-us/library/ms530721.aspx

page-break-before设置打印分布符

url()指示符, http://www.w3.org/TR/CSS21/syndata.html#value-def-uri

!important规则, http://www.w3.org/TR/CSS21/cascade.html#important-rules

table中直接输入的文字和其他标记设置不同的颜色

CSS标准中级联的文档, http://www.w3.org/TR/CSS21/cascade.html#cascade

[div+css - Firefox和IE浏览器兼容问题]

水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记，!important需要放在前面才能起作用
手形鼠标指针，使用cursor: pointer;
padding的尺寸，在Firefox中padding是计算在width之外的，而IE6是计算在width之内的
margin的尺寸，在IE6中带有float样式的元素的margin尺寸计算有误，需要借助padding和!important标记实现兼容

使用word-wrap设置自动折行, 仅对IE有效

<li style="overflow:hidden">在Firefox下会丢失左侧的圆点

Internet Explorer的CSS参考资料, http://msdn2.microsoft.com/en-us/library/ms531209.aspx

用CSS实现cellSpacing属性效果, border-spacing: 10px; border-spacing: expression(this.cellSpacing=10);

padding-right在IE6下导致抖动

[div+css - CSS标准]

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:级联样式表第2级第1次修改(CSS 2.1)规范, http://www.w3.org/TR/CSS21/

4.3.2 Lengths长度, http://www.w3.org/TR/CSS21/syndata.html#length-units

8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' - 8.3边距属性, http://www.w3.org/TR/CSS21/box.html#margin-properties

8.5 Border properties边框属性, http://www.w3.org/TR/CSS21/box.html#border-properties

9.5 Floats浮动, http://www.w3.org/TR/CSS21/visuren.html#floats

background-image背景图片, http://www.w3.org/TR/CSS21/colors.html#propdef-background-image

17.6.2 The collapsing border model压缩边框模型, http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

border-collapse压缩边框 - IE文档, http://msdn2.microsoft.com/en-us/library/ms533513.aspx

[div+css - XHTML标准]

5.6. Table Modules - Table模块, http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#sec_5.6.

[div+css - 其他HTML问题]

使用OPTGROUP对SELECT中的OPTION分组

nowrap标记设置不自动折行, http://www.w3.org/TR/1998/REC-html40-19980424/struct/tables.html#adef-nowrap

leftmargin设置页面左边距, topmargin设置页面上边距

disabled属性, http://msdn2.microsoft.com/en-us/library/ms533732.aspx

About Font Embedding:关于字体嵌入, http://msdn2.microsoft.com/en-us/library/ms533034.aspx