金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 表格边框你知多少,表格行与列边框样式处理的

表格边框你知多少,表格行与列边框样式处理的

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-20 14:30

表格边框你知多少

2017/11/09 · CSS · 1 评论 · 表格

原文出处: 腾讯isux   

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有介绍,以及对表格的边框渲染原理进行了深度的剖析

金沙棋牌官方平台 1

原理分析

表格行与列边框样式处理的原理分析

1、border-style:none优先级最低

金沙棋牌官方平台 2

结论

    a)当且仅当两个相邻产生冲突的边框的border-style为none时,冲突边框才不会显示

2、border-style:hidden优先级高于border-style:solid

金沙棋牌官方平台 3

结论

    a)border-style:hidden;边框的优先级高于solid样式的边框

3、金沙棋牌官方平台,border-style优先级

金沙棋牌官方平台 4

结论

    a)hidden > double > solid > dashed > dotted > none(默认值)

4、边框的溢出与style属性有关

结论

    a)上面两个角中水平方向紧贴着table边框的边很重要,如若border-style为hidden,则边框会溢出

    b)垂直方向上不会发生溢出情况

    c)溢出的边框不会占用文本流的空间

理由

    具体实例可以查看border-style优先级

5、border-width较大者优先渲染

金沙棋牌官方平台 5

结论

    a)border-width较大者边框样式将被渲染

理由

    命名为“中”的单元格边框比其他边框都要大,因此渲染的是“中”单元格的边框,因而得出较大边框样式将被渲染,也符合W3C里面对哪条边渲染的解释:“The rule of thumb is that at each edge the most “eye catching” border style is chosen”

6、table-border优先级

金沙棋牌官方平台 6

结论

    a)优先级如下:’table-cell’,’table-row’,’table-row-group’,’table-col’,’table-col-group’, ‘table’

理由

    可以到table-border优先级启用审查工具逐层去掉’table-cell’,’table-row’,’table-row-group’,’table-col’,’table-col-group’, ‘table’边框,即可看到效果

7、左上优先渲染原则

金沙棋牌官方平台 7

结论

    a)水平方向上:当两个单元格只存在颜色不一致的情况下,发生冲突的单元格相对较左侧单元格的样式

    b)垂直方向上:当两个单元格只存在颜色不一致的情况下,发生冲突的单元格相对较顶部单元格的样式

8、border-style:double四个角的渲染方式

chorme

金沙棋牌官方平台 8

FF

金沙棋牌官方平台 9

IE

金沙棋牌官方平台 10

结论

    a)四个角重合之处采用组合层叠的方式进行渲染,而不是单一的选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染)(chrome与IE,FF四个角重合之处不会采用组合层叠的方式进行渲染)

    b)可以看出在FF下,四个角重合之处渲染优先级是,垂直方向上的两个相邻单元格,相对偏下的单元格的冲突边进行渲染

理由

    从“中”这个单元格的四个角可以看出,四个角除了会的底边是有其他叫层叠而来,而不是单一的去选择某种边框去渲染

9、border-style:double表现形式

金沙棋牌官方平台 11

结论

    a)border-style:double;宽度需要大于等于3px才能体现,否则,样式与solid无异

    b)border-style:double;会发生溢出,并且左右溢出值不一致

10、border-style:ridge与border-style:groove的表现形式

结论

    a)table2 ~ table5发生冲突边渲染情况可以得出 ridge > groove

    b)当ridge 与 groove冲突并且在表格 非 第一行发生冲突时,两个冲突单元格的左上角和右上角以及冲突边的上角都存在问题

    c)从table2、table3、table4中可以看出,当outset 与 inset冲突且在表格 非 第一行发生冲突时,groove ==> outset, ridge ==> inset

理由

    例10~例14可以到线上例子详细查看

11、border-style:outset与border-style:inset的表现形式

结论

    a)从table2~table5发生冲突边渲染情况可以得出 outset > inset

    b)从table2、table4、table5中可以看出,当outset 与 inset冲突且在表格第一行发生冲突时,两个冲突单元格的左上角和右上角以及冲突边的上角都存在问题

    c)从table2、table4、table5中可以看出,当outset 与 inset冲突且在表格第一行发生冲突时,outset ==> groove, inset ==> ridge

理由

    例10~例14可以到线上例子详细查看

12、border-style:outset与border-style:ridge的表现形式

结论

    a)table2~table5发生冲突边渲染情况可以得出 ridge > outset

    b)两个单元格发生冲突以后,左上角都存在渲染问题

    c)当outset 与 inset冲突且在表格第一行发生冲突时,两个冲突单元格的左上角和右上角以及冲突边的上角都存在问题

    d)综合上部表现可以看出,当两个单元格发生冲突以后,处于表格的最后一行时,冲突边的上部(角)存在渲染问题

    e)综合上部表现可以看出,outset未发生冲突的边框的上部角会出现渲染问题

理由

    例10~例14可以到线上例子详细查看

13、border-style:groove与border-style:inset的表现形式

结论

    a)table2~table5发生冲突边渲染情况可以得出 groove > inset

    b)groove与outset可以相互转化,ridge与inset可以相互转化

理由

    例10~例14可以到线上例子详细查看

14、border-style:groove与border-style:outset的表现形式

结论

    a)table2~table5发生冲突边渲染情况可以得出 outset > groove

理由

    例10~例14可以到线上例子详细查看

15、direction属性对table-border的影响

金沙棋牌官方平台 12

FF

金沙棋牌官方平台 13

结论

    a)tr上使用direction: rtl;属性,单元格(只是边框,内容不变)并不会左右调换,而是边框向后推了(最后一个边框使用了渲染成第二个边框,倒数第二个边框渲染成倒数第三个边框,依此列推)

    b)table上使用direction: rtl;属性,会使单元格左右调换,并且发生冲突的单元格相对较右侧单元格的样式

备注

    在tr上使用direction: rtl;属性,仅在google下生效,其他浏览器下不会生效

小结

实战应用小结

    1、border-collapse: collapse;存在冲突情况,border-collapse: separate;不存在冲突情况(理所当然);

    2、border-style: hidden;边框优先级最高,hidden属性优先于所有其他边界的冲突;

    3、border-style: none;是边框样式的默认值,其优先级最低,只有当发生冲突的所有元素的边框属性都为”none”时,边框才会被省略;

    4、border-width的值不相同时,窄边界将会被舍弃,较宽的边界会被显示;

    5、border-width的值相同时,border-style样式优先级顺序为’double’, ‘solid”, ‘dotted’, ‘ridge’, ‘outset’, ‘ ‘inset’;

    6、border-color的值不相同时,border-color最终显示的颜色优先级如下为’table-cell’,’table-row’,’table-row-group’,’table-col’,’table-col-group’,’table’;

    7、border-color的值不相同时,但都是同一类型(如:table-cell),水平方向由direction属性决定,若direction:ltr属则采用相对较左侧的元素样式,若direction:rtl属则采用相对较右侧的元素样式;垂直方向上则采用相对较靠近顶部的元素样式;

    8、border-collapse: collapse;相邻的边框存在冲突,但两对角的两个单元格是不存在冲突现象;

    9、border-style:double;宽度渲染与设置值不一致;

    10、border-style:double;宽度需要大于3px才能体现,否则,样式与solid无异;

    11、水平方向上:当两个单元格只存在颜色不一致的情况下,冲突边界渲染的样式与direction(table上设置该属性)有关。若direction:ltr属则采用相对较左侧的元素样式,若direction:rtl属则采用相对较右侧的元素样式;垂直方向上:当两个单元格只存在颜色不一致的情况下,较靠近顶部的边框样式将被渲染;

    12、四个角重合之处采用组合层叠的方式进行渲染,而不是单一的选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染)

    13、上面两个角中水平方向紧贴着table边框的边很重要,如若border-style为hidden,则边框会,溢出垂直方向上不会发生溢出情况,溢出的边框不会占用文本流的空间

兼容性问题

表格在各个浏览器下的兼容性问题

    1、水平方向上:当两个单元格只存在颜色不一致的情况下,冲突边界渲染的样式与direction(tr上设置该属性在chrome有效,在其他浏览器上设置无任何效果)有关。若direction:ltr属则采用相对较左侧的元素样式,若direction:rtl属则导致渲染失常(无法解释)

    2、四个角重合之处采用组合层叠的方式进行渲染,而不是单一的选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染)(chrome与IE)

    3、在FF下,FF四个角重合之处不会采用组合层叠的方式进行渲染,四个角重合之处渲染规则是采用垂直方向上的两个相邻单元格,相对偏下的单元格的冲突边进行渲染

        a)在FF和IE下,ridge和inset渲染是一样的,groove和outset渲染是一样的;

        b)在chrome下,当outset 与 inset冲突且在表格第一行发生冲突时,outset ==> groove, inset ==> ridge,当outset 与 inset冲突且在表格 非 第一行发生冲突时,groove ==> outset,ridge ==> inset

实战应用

表格行与列边框样式处理的实战应用

上面分享了一些实用表格时,常遇到的一些冲突;

下面内容是对上述文章中提到的一些知识点加以运用,用到具体的例子上。

采用表格布局最远可以追溯到上个世纪90年代,当时使用table进行布局是没有办法的办法。从css2.0以后以table为主的网页布局慢慢的退出历史舞台,而采用现在为大家所熟悉的div

  • css的布局方式。

table网页布局方式退出历史舞台并不等于table也退出舞台,table有它自身的好处。目前大家使用table多数用于数据展示,数据展示必然会涉及到数据的对比,突出重点数据的需求。因此则产生了类似下图的展示样式。

金沙棋牌官方平台 14

金沙棋牌官方平台 15

看到这个视觉稿,想必大家第一反应是高亮列的实现方式应该是在td上面添加高亮边框即可,没什么难度的。如果你这样认为那就错了。

在td上面直接添加border,会在造成左侧边缺失,具体原因可以参考(左上优先渲染原则),如果要在高亮列的单元格直接实现缺失的左边框(采用行内样式或者加权重的方法,也是实现不了的),暂时是没有什么办法的。如果有请联系笔者。

如果你查阅了上面推荐的文章,那么你就知道产生这种现象的原因。

解决方法是在高亮列的前一列的右边框添加高亮边框

看到解决方法有没有一种很蛋疼的感觉,高亮列产生的问题,要跑到高亮列的前一列去解决。

今天我就针对这一类的问题进行研究并提供相关解决方法

解决上面的问题很简单

style.css

JavaScript

/*公共 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*公共 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

JavaScript

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<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>

 主要知识点

1、利用:nth-child(n)选择器选择高亮列/行

    2、当边框样式为实线时,运用double优先级比solid高的特点,覆盖solid样式

    3、运用1px或2px的double视觉上与solid一样的特点

    4、运用’table-cell’,’table-row’,’table-row-group’,’table-col’,’table-col-group’, ‘table’之间渲染优先级的关系

solid实现是如此,那dashed实现又如何呢

dashed.css

JavaScript

/*公共 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/*公共 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

JavaScript

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<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优先级较低的规则。

2 赞 5 收藏 1 评论

金沙棋牌官方平台 16

废话不多说,直接上干货!

 表格类

/*所有内容都在这个DIV内*/
.all {
width: 100%;
border: 1px solid #000000;
}

最近需求中有用到table,并在做需求的过程中遇到table border的问题,在空余的时间把遇到的问题进行探索一番,收获颇多,特此分享;

<table class="table table-bordered">         为所有表格的单元格添加边框

/*表格样式*/
table {
width: 100%; /*撑满上面定义的500像素*/
border: 1px solid #FF00FF;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
/*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/
table tr th {
border: 1px solid #FF00FF;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
table tr td {
border: 1px solid #FF00FF;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
}

阅读推荐

一站式满足电商节云计算需求的秘诀
Web 前端性能优化 : 如何有效提升静态文件的加载速度
白夜追凶 :手 Q 图片的显示和发送逻辑

此文已由作者授权腾讯云技术社区发布,转载请注明文章出处
原文链接:
https://cloud.tencent.com/community/article/846600

         <td>Bangalore</td>

<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~

<div class="table-responsive">  通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

<body>
<div class="all">
<div class="title">
<table>
<tr>
<th style="width:10%">Operate</th>
<th style="width:20%">Date</th>
<th style="width:25%">Acknowledge</th>
<th style="width:15%">Other1</th>
<th style="width:15%">Other2</th>
<th>Other3</th>
</tr>
</table>
</div>

表格行与列边框样式处理的原理分析

1、border-style:none优先级最低 demo

[图片上传失败...(image-ab5c70-1510037324774)]

结论

a)当且仅当两个相邻产生冲突的边框的border-style为none时,冲突边框才不会显示

2、border-style:hidden优先级高于border-style:solid demo

[图片上传失败...(image-d3b43c-1510037324774)]

结论

a)border-style:hidden;边框的优先级高于solid样式的边框

3、border-style优先级 demo

[图片上传失败...(image-d63d3-1510037324774)]

结论

a)hidden > double > solid > dashed > dotted > none(默认值)

4、边框的溢出与style属性有关 demo

结论
a)上面两个角中水平方向紧贴着table边框的边很重要,如若border-style为hidden,则边框会溢出
b)垂直方向上不会发生溢出情况
c)溢出的边框不会占用文本流的空间

理由
具体实例可以查看border-style优先级

** 5、border-width较大者优先渲染 demo**

[图片上传失败...(image-9575c7-1510037324774)]

结论
a)border-width较大者边框样式将被渲染

理由
命名为“中”的单元格边框比其他边框都要大,因此渲染的是“中”单元格的边框,因而得出较大边框样式将被渲染,也符合W3C里面对哪条边渲染的解释:“The rule of thumb is that at each edge the most "eye catching" border style is chosen”

** 6、table-border优先级 demo**

[图片上传失败...(image-9da5f4-1510037324774)]

结论
a)优先级如下:'table-cell','table-row','table-row-group','table-col','table-col-group', 'table'

理由
可以到Demo7启用审查工具逐层去掉'table-cell','table-row','table-row-group','table-col','table-col-group', 'table'边框,即可看到效果
7、左上优先渲染原则 demo

结论
a)水平方向上:当两个单元格只存在颜色不一致的情况下,发生冲突的单元格相对较左侧单元格的样式
b)垂直方向上:当两个单元格只存在颜色不一致的情况下,发生冲突的单元格相对较顶部单元格的样式

** 8、border-style:double四个角的渲染方式 demo**

chorme

[图片上传失败...(image-cf4c00-1510037324774)]

FF

[图片上传失败...(image-8bde72-1510037324774)]

IE

[图片上传失败...(image-e7cfe4-1510037324774)]

结论
a)四个角重合之处采用组合层叠的方式进行渲染,而不是单一的选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染)(chrome与IE,FF四个角重合之处不会采用组合层叠的方式进行渲染)
b)可以看出在FF下,四个角重合之处渲染优先级是,垂直方向上的两个相邻单元格,相对偏下的单元格的冲突边进行渲染

理由
从“中”这个单元格的四个角可以看出,四个角除了会的底边是有其他叫层叠而来,而不是单一的去选择某种边框去渲染

** 9、border-style:double表现形式 demo**

[图片上传失败...(image-3daf7-1510037324774)]

结论
a)border-style:double;宽度需要大于等于3px才能体现,否则,样式与solid无异
b)border-style:double;会发生溢出,并且左右溢出值不一致

10、border-style:ridge与border-style:groove的表现形式 demo

结论
a)table2 ~ table5发生冲突边渲染情况可以得出 ridge > groove
b)当ridge 与 groove冲突并且在表格 非 第一行发生冲突时,两个冲突单元格的左上角和右上角以及冲突边的上角都存在问题
c)从table2、table3、table4中可以看出,当outset 与 inset冲突且在表格 非 第一行发生冲突时,groove ==> outset, ridge ==> inset

理由
例10~例14可以到线上例子详细查看

11、border-style:outset与border-style:inset的表现形式 demo

结论
a)从table2~table5发生冲突边渲染情况可以得出 outset > inset
b)从table2、table4、table5中可以看出,当outset 与 inset冲突且在表格第一行发生冲突时,两个冲突单元格的左上角和右上角以及冲突边的上角都存在问题
c)从table2、table4、table5中可以看出,当outset 与 inset冲突且在表格第一行发生冲突时,outset ==> groove, inset ==> ridge

理由
例10~例14可以到线上例子详细查看

12、border-style:outset与border-style:ridge的表现形式 demo

结论
a)table2~table5发生冲突边渲染情况可以得出 ridge > outset
b)两个单元格发生冲突以后,左上角都存在渲染问题
c)当outset 与 inset冲突且在表格第一行发生冲突时,两个冲突单元格的左上角和右上角以及冲突边的上角都存在问题
d)综合上部表现可以看出,当两个单元格发生冲突以后,处于表格的最后一行时,冲突边的上部(角)存在渲染问题
e)综合上部表现可以看出,outset未发生冲突的边框的上部角会出现渲染问题

理由
例10~例14可以到线上例子详细查看

** 13、border-style:groove与border-style:inset的表现形式demo**

结论
a)table2~table5发生冲突边渲染情况可以得出 groove > inset
b)groove与outset可以相互转化,ridge与inset可以相互转化

理由
例10~例14可以到线上例子详细查看

14、border-style:groove与border-style:outset的表现形式 demo

结论
a)table2~table5发生冲突边渲染情况可以得出 outset > groove

理由
例10~例14可以到线上例子详细查看

15、direction属性对table-border的影响demo

[图片上传失败...(image-2277ab-1510037324774)]

结论
a)tr上使用direction: rtl;属性,单元格(只是边框,内容不变)并不会左右调换,而是边框向后推了(最后一个边框使用了渲染成第二个边框,倒数第二个边框渲染成倒数第三个边框,依此列推)
b)table上使用direction: rtl;属性,会使单元格左右调换,并且发生冲突的单元格相对较右侧单元格的样式

备注
在tr上使用direction: rtl;属性,仅在google下生效,其他浏览器下不会生效

结论:

  • border-collapse: collapse;存在冲突情况,border-collapse: separate;不存在冲突情况(理所当然);
  • border-style: hidden;边框优先级最高,hidden属性优先于所有其他边界的冲突;
  • border-style: none;是边框样式的默认值,其优先级最低,只有当发生冲突的所有元素的边框属性都为"none"时,边框才会被省略;
  • border-width的值不相同时,窄边界将会被舍弃,较宽的边界会被显示;
  • border-width的值相同时,border-style样式优先级顺序为'double','solid'','dotted','ridge','outset',' 'inset';
  • border-color的值不相同时,border-color最终显示的颜色优先级如下为'table-cell','table-row','table-row-group','table-col','table-col-group','table';
  • border-color的值不相同时,但都是同一类型(如:table-cell),水平方向由direction属性决定,若direction:ltr属则采用相对较左侧的元素样式,若direction:rtl属则采用相对较右侧的元素样式;垂直方向上则采用相对较靠近顶部的元素样式;
  • border-collapse: collapse;相邻的边框存在冲突,但两对角的两个单元格是不存在冲突现象;
  • border-style:double;宽度渲染与设置值不一致;
  • border-style:double;宽度需要大于3px才能体现,否则,样式与solid无异;
  • 水平方向上:当两个单元格只存在颜色不一致的情况下,冲突边界渲染的样式与direction(table上设置该属性)有关。若direction:ltr属则采用相对较左侧的元素样式,若direction:rtl属则采用相对较右侧的元素样式;垂直方向上:当两个单元格只存在颜色不一致的情况下,较靠近顶部的边框样式将被渲染;
  • 四个角重合之处采用组合层叠的方式进行渲染,而不是单一的选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染)
  • 上面两个角中水平方向紧贴着table边框的边很重要,如若border-style为hidden,则边框会,溢出垂直方向上不会发生溢出情况,溢出的边框不会占用文本流的空间

另外发现一些兼容性问题:

  • 水平方向上:当两个单元格只存在颜色不一致的情况下,冲突边界渲染的样式与direction(tr上设置该属性在chrome有效,在其他浏览器上设置无任何效果)有关。若direction:ltr属则采用相对较左侧的元素样式,若direction:rtl属则导致渲染失常(无法解释)
  • 四个角重合之处采用组合层叠的方式进行渲染,而不是单一的选择某一种样式,而四条边框则非重合(单一选择某一条边进行渲染)(chrome与IE)
  • 在FF下,FF四个角重合之处不会采用组合层叠的方式进行渲染,四个角重合之处渲染规则是采用垂直方向上的两个相邻单元格,相对偏下的单元格的冲突边进行渲染
  • a)在FF和IE下,ridge和inset渲染是一样的,groove和outset渲染是一样的;

b)在chrome下,当outset 与 inset冲突且在表格第一行发生冲突时,outset ==> groove, inset ==> ridge,当outset 与 inset冲突且在表格 非 第一行发生冲突时,groove ==> outset,ridge ==> inset

         <td class="success">Tanmay</td>

/*表头在这个DIV内*/
.title {
width: 500px; /*这个宽度需要与下面的内容的DIV相等*/
}

作者:韩宇波

导语:table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有介绍,以及对表格的边框渲染原理进行了深度的剖析。

 

/*容纳表格内容的DIV,这个DIV上放置滚动条*/
.content {
width: 100%;
height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/
overflow: scroll; /*总是显示滚动条*/
}
/*真正存放内容的DIV*/
.content div {
width: 500px; /*与表头的DIV宽度相同*/
}
</style>
</head>

表格行与列边框样式处理的实战应用

上面分享了一些实用表格时,常遇到的一些冲突;

下面内容是对上述文章中提到的一些知识点加以运用,用到具体的例子上。

采用表格布局最远可以追溯到上个世纪90年代,当时使用table进行布局是没有办法的办法。从css2.0以后以table为主的网页布局慢慢的退出历史舞台,而采用现在为大家所熟悉的div

  • css的布局方式。

table网页布局方式退出历史舞台并不等于table也退出舞台,table有它自身的好处。目前大家使用table多数用于数据展示,数据展示必然会涉及到数据的对比,突出重点数据的需求。因此则产生了类似下图的展示样式。

[图片上传失败...(image-86706e-1510037324774)]

[图片上传失败...(image-314f4-1510037324774)]

看到这个视觉稿,想必大家第一反应是高亮列的实现方式应该是在td上面添加高亮边框即可,没什么难度的。如果你这样认为那就错了。

在td上面直接添加border,会在造成左侧边缺失,具体原因可以参考(demo),如果要在高亮列的单元格直接实现缺失的左边框(采用行内样式或者加权重的方法,也是实现不了的),暂时是没有什么办法的。如果有请联系笔者。

如果你查阅了上面推荐的文章,那么你就知道产生这种现象的原因。

解决方法是在高亮列的前一列的右边框添加高亮边框。

看到解决方法有没有一种很蛋疼的感觉,高亮列产生的问题,要跑到高亮列的前一列去解决。

今天我就针对这一类的问题进行研究并提供相关解决方法

解决上面的问题很简单

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>
</table>

主要知识点

  1. 利用:nth-child(n)选择器选择高亮列/行
  2. 当边框样式为实线时,运用double优先级比solid高的特点,覆盖solid样式
  3. 运用1px或2px的double视觉上与solid一样的特点
  4. 运用'table-cell','table-row','table-row-group','table-col','table-col-group', '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优先级较低的特点。

      <tr class="active">

<div class="content">
<div>
<table>
<tr>
<td style="width:10%">Operate</td>
<td style="width:20%">Date</td>
<td style="width:25%">Acknowledge</td>
<td style="width:15%">Other1</td>
<td style="width:15%">Other2</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other21</td>
<td>Other22</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other31</td>
<td>Other32</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>Date</td>
<td>Acknowledge</td>
<td>Other41</td>
<td>Other42</td>
<td>Other3</td>
</tr>
<tr>
<td>Operate</td>
<td>2011-12-12 12:22:34 9987</td>
<td>Acknowledge</td>
<td>Other51</td>
<td>Other52</td>
<!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->
<td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

      </tr>

</div>

      <tr class="info">

         <td>Sachin</td>

<table class="table">

.warning            表示一个需要注意的警告

   </thead>

         <td  class="danger">Mumbai</td>

</table>

         <td>Sachin</td>

      </tr>

.danger         表示一个危险的或潜在的负面动作

      </tr>

         <td>Mumbai</td>

      </tr>tbody>

<tr>, <th> 和 <td> 类

         <th>名称</th>

   <caption>基本的表格布局</caption>

      <tr class="success">

.info                  表示信息变化的操作

      <tr>


<table class="table table-condensed">        让表格更加紧凑

         <th>城市</th>

 

      </tr>tbody>

         <td>Tanmay</td>

      </tr>

   <thead>

      <tr class="danger">

 <table class="table table-striped">          在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

   <tbody>

         <td>Bangalore</td>

         <td>Mumbai</td>

.success            表示一个成功的或积极的动作

给表格行或单元格添加颜色

      <tr class="warning">

<table class="table table-hover">            在 <tbody> 内的任一行启用鼠标悬停状态

bootstrap之表格的简单用法,加载bootstrap后直接使用,也可重定新定样式

.active         对某一特定的行或单元格应用悬停颜色

 

         <td>Sachin</td>

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:表格边框你知多少,表格行与列边框样式处理的

关键词: