我一直在努力理解
this excerpt
从CSS 2.2规范中删除了一段时间,但没有成功(粗体选择是我的):
UA必须计算
最初的
表格的左右边框宽度
检查表格第一行中的第一个和最后一个单元格。表的左边框宽度为第一个单元格折叠左边框的一半
表的右边框宽度是最后一个单元格右折叠宽度的一半
边境如果后续行具有较大的折叠左和右边界,
然后任何多余的溢出到表的边缘区域。
表格的顶部边框宽度是通过检查所有符合以下条件的单元格来计算的
用表格的顶部边框折叠它们的顶部边框。顶部边框
表的宽度等于最大折叠顶部边框的一半。
这就是如何在Chrome中实现边框、折叠等(FF和IE>7相同):
table {
border: 6px solid green;
border-spacing: 0;
border-collapse: collapse;
}
#cell_1_1 {
border: 28px solid red;
}
#cell_2_1 {
border: 12px solid chartreuse;
}
#cell_2_2 {
border: 2px solid cyan;
}
当我期待这样的事情时:
我希望表格的左边框是14像素厚。因为第一个单元格的折叠左边框
#cell_1_1
28px宽(
表格的左边框宽度为第一个单元格折叠左边框的一半
)在左边,边界在单元格和表格之间分割。因此,从视觉上看,表格在第一个单元格附近有28像素的边框,但14像素属于第一个单元格的边框。然后,表格左侧的边框保持不变。如果某些单元格的边框较宽,则它们会向左突出,而不会影响表的左边框。
顶部边框也是如此。
我还认为这个问题可能与
最初的
摘录中的单词,也就是说,这些规则只适用于表没有指定边框的情况,但结果证明它是不相关的(删除表的边框样式规则只是完全删除了绿色边框)。
那么有人能回答下一个问题吗
现在,如果我们反之亦然,并假设Chrome中的实现作为导出规范的起点,那么这部分
应该是
类似于下一个(为了简洁起见,我只保留了与左边框相关的部分):
UA必须计算表格的初始左右边框宽度
然后用于相对于其容纳块定位桌子
通过
检查表格第一行中的第一个和最后一个单元格。表格的左边框宽度为第一个单元格折叠左边框的一半
所有边界冲突(如有)解决后
...
如果后续行具有较大的折叠左和右边界,
然后任何多余的溢出到表的边缘区域。
...
当
确定表是否溢出某个祖先(请参见“溢出”)
,但不影响表相对于其包含块的位置
那么摘录就有意义了。
这里有一个表格,其边框比第一个单元格的边框宽,位于粉红色背景的包含块内(如我们所见,表格的边框选择在第一个单元格边框上方,因为它更宽,然后该边框用于将表格定位在容器内。后续单元格的较宽边框突出超出表格的边框):
这里有一个相同的表格,第一个单元格的边界比表格的边界宽,在边界冲突解决过程中被选中。这里,这个边界用于相对于容器定位桌子:
