table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有介绍,以及对表格的边框渲染原理进行了深度的剖析
原理分析
表格行与列边框样式处理的原理分析
1、border-style:none优先级最低
结论
当且仅当两个相邻产生冲突的边框的border-style为none时,冲突边框才不会显示
2、border-style:hidden优先级高于border-style:solid
结论
3、border-style 优先级
结论
4、边框的溢出与style属性有关
结论
理由
具体实例可以查看border-style优先级
5、border-width较大者优先渲染
结论
理由
命名为“中”的单元格边框比其他边框都要大,因此渲染的是“中”单元格的边框,因而得出较大边框样式将被渲染,也符合W3C里面对哪条边渲染的解释:“The rule of thumb is that at each edge the most “eye catching” border style is chosen”
6、table-border 优先级
结论
理由
可以到table-border优先级启用审查工具逐层去掉’table-cell’,’table-row’,’table-row-group’,’table-col’,’table-col-group’, ‘table’边框,即可看到效果
7、左上优先渲染原则
结论
8、border-style:double四个角的渲染方式
chorme
FF
IE
结论
理由
从“中”这个单元格的四个角可以看出,四个角除了会的底边是有其他叫层叠而来,而不是单一的去选择某种边框去渲染
9、border-style:double 表现形式
结论
10、border-style:ridge与border-style:groove的表现形式
结论
理由
例10~例14可以到线上例子详细查看
11、border-style:outset与border-style:inset的表现形式
结论
理由
例10~例14可以到线上例子详细查看
12、border-style:outset与border-style:ridge的表现形式
结论
理由
例10~例14可以到线上例子详细查看
13、border-style:groove与border-style:inset的表现形式
结论
理由
例10~例14可以到线上例子详细查看
14、border-style:groove与border-style:outset的表现形式
结论
table2~table5发生冲突边渲染情况可以得出 outset > groove
理由
例10~例14可以到线上例子详细查看
15、direction属性对table-border 的影响
FF
结论
备注
在tr上使用direction: rtl;属性,仅在google下生效,其他浏览器下不会生效
小结
实战应用小结
兼容性问题
表格在各个浏览器下的兼容性问题
实战应用
表格行与列边框样式处理的实战应用
上面分享了一些实用表格时,常遇到的一些冲突;
下面内容是对上述文章中提到的一些知识点加以运用,用到具体的例子上。
采用表格布局最远可以追溯到上个世纪90年代,当时使用table进行布局是没有办法的办法。从css2.0以后以table为主的网页布局慢慢的退出历史舞台,而采用现在为大家所熟悉的div + css的布局方式。
table网页布局方式退出历史舞台并不等于table也退出舞台,table有它自身的好处。目前大家使用table多数用于数据展示,数据展示必然会涉及到数据的对比,突出重点数据的需求。因此则产生了类似下图的展示样式。
看到这个视觉稿,想必大家第一反应是高亮列的实现方式应该是在td上面添加高亮边框即可,没什么难度的。如果你这样认为那就错了。
在td上面直接添加border,会在造成左侧边缺失,具体原因可以参考(左上优先渲染原则),如果要在高亮列的单元格直接实现缺失的左边框(采用行内样式或者加权重的方法,也是实现不了的),暂时是没有什么办法的。如果有请联系笔者。
如果你查阅了上面推荐的文章,那么你就知道产生这种现象的原因。
解决方法是在高亮列的前一列的右边框添加高亮边框。
看到解决方法有没有一种很蛋疼的感觉,高亮列产生的问题,要跑到高亮列的前一列去解决。
今天我就针对这一类的问题进行研究并提供相关解决方法
解决上面的问题很简单
style.css
/*公共 start*/
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
font-size: 14px;
width: 30%;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
table tr td:first-child {
font-weight: bold;
}
th {
background-color: #f3f3f3;
}
/*公共 end*/
.comparison-table {
width: 30%;
border: 1px solid;
border-color: #e6ebf2;
color: #333;
text-align: left;
font-size: 14px;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
vertical-align: top;
line-height: 1.7;
padding: 0;
border: 1px solid #d7e7f3;
}
.comparison-table thead th {
background-color: #f6f8fa;
line-height: 1;
}
.comparison-table .comparison-table-inner {
padding: 15px 40px;
color: inherit;
}
.comparison-table tbody tr td:first-child {
font-weight: bold;
}
.comparison-table tr td:nth-child(2),
.comparison-table tr th:nth-child(2) {
border: 1px double #22d1b4;
}
.comparison-table colgroup col:nth-child(2) {
border: 1px double #22d1b4;
}
.comparison-table tr th:nth-child(2) {
background-color: #ccf0ec;
color: #22d1b4;
}
demo.html
<table class=“comparison-table”>
<colgroup>
<col style=“width:22%;”>
<col style=“”>
<col style=“”>
</colgroup>
<thead>
<tr>
<th>
<div class=“comparison-table-inner”>
<p>优势</p>
</div>
</th>
<th>
<div class=“comparison-table-inner”>
<p>云服务器</p>
</div>
</th>
<th>
<div class=“comparison-table-inner”>
<p>传统服务器</p>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class=“comparison-table-inner”>弹性</div>
</td>
<td>
<div class=“comparison-table-inner”>弹性扩展,灵活配置</div>
</td>
<td>
<div class=“comparison-table-inner”>运维困难</div>
</td>
</tr>
<tr>
<td>
<div class=“comparison-table-inner”>可靠</div>
</td>
<td>
<div class=“comparison-table-inner”>稳定可靠,数据放心</div>
</td>
<td>
<div class=“comparison-table-inner”>系统脆弱,数据丢失</div>
</td>
</tr>
<tr>
<td>
<div class=“comparison-table-inner”>易用</div>
</td>
<td>
<div class=“comparison-table-inner”>即买即用,快速部署</div>
</td>
<td>
<div class=“comparison-table-inner”>费心麻烦</div>
</td>
</tr>
<tr>
<td>
<div class=“comparison-table-inner”>安全</div>
</td>
<td>
<div class=“comparison-table-inner”>立体防护,专业支持</div>
</td>
<td>
<div class=“comparison-table-inner”>黑客入侵</div>
</td>
</tr>
</tbody>
</table>
主要知识点
solid实现是如此,那dashed实现又如何呢
dashed.css
/*公共 start*/
*{margin: 0;padding: 0;}
a{color: #2277da;}
table{
border-collapse: collapse;
font-size: 14px;
width: 30%;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
table tr td:first-child{
font-weight: bold;
}
th{
background-color: #f3f3f3;
}
/*公共 end*/
.method-4 th,
.method-4 td{
padding: 20px;
text-align: center;
}
.method-4 tr{
border-top: 1px dashed #d3d3d3;
border-bottom: 1px dashed #d3d3d3;
}
.method-4 thead tr{
border-top-width: 0;
}
.method-4 tr:last-child{
border-bottom-width: 0;
}
.method-4 colgroup{
border: 1px dashed #d3d3d3;
}
.method-4 tr td:nth-child(3),
.method-4 tr th:nth-child(3),
.method-4 colgroup:nth-child(3){
border: 1px dashed #22d1b4;
}
.method-4 tr td:nth-child(1),
.method-4 tr th:nth-child(1){
border-left: 1px dashed #22d1b4;
}
.method-4 colgroup:nth-child(1){
border: 1px dashed #22d1b4;
}
dashed.html
<div class=“method-4”>
<table>
<colgroup></colgroup>
<colgroup class=“highlight”></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>优势</th>
<th>云服务器</th>
<th>传统服务器</th>
</tr>
</thead>
<tbody>
<tr>
<td>弹性</td>
<td>弹性扩展,灵活配置</td>
<td>运维困难</td>
</tr>
<tr>
<td>可靠</td>
<td>稳定可靠,数据放心</td>
<td>系统脆弱,数据丢失</td>
</tr>
<tr>
<td>易用</td>
<td>即买即用,快速部署</td>
<td>费心麻烦</td>
</tr>
<tr>
<td>安全</td>
<td>立体防护,专业支持</td>
<td>黑客入侵</td>
</tr>
</tbody>
</table>
</div>
而在这个demo中最核心的知识点就是利用colgroup上设置的border优先级较低的规则。
最后,由于公众号限制,可以通过原文了解每个标题所做的demo。