报表边框你知多少,CSS3完成五彩进度条应用

报表边框你知多少

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)溢出的边框不会占据文本流的空中

理由

   
具体实例能够查阅报表边框你知多少,CSS3完成五彩进度条应用。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)从table二 、table③ 、table4中得以看到,当outset 与 inset争辨且在表格
非 第②行发生争辩时,groove ==> outset, ridge ==> inset

理由

    例10~例14能够到线上例子详细查看

11、border-style:outset与border-style:inset的表现情势

结论

    a)从table2~table5产生争辨边渲染情形能够得出 outset > inset

    b)从table二 、table四 、table5中能够看来,当outset 与
inset争论且在报表第③行发生争持时,八个争论单元格的左上角和右上角以及争论边的上角都留存难题

    c)从table贰 、table四 、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下生效,其他浏览器下不会收效

小结

实战运用小结

    壹 、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;宽度渲染与安装值不均等;

   
10、border-style:double;宽度须要大于3px才能反映,否则,样式与solid无差距;

   
1一 、水平方向上:当七个单元格只设有颜色不雷同的景况下,冲突边界渲染的样式与direction(table上设置该属性)有关。若direction:ltr属则接纳相对较左边的因素样式,若direction:rtl属则运用相对较右边的要素样式;垂直方向上:当两个单元格只存在颜色不均等的图景下,较邻近顶部的边框样式将被渲染;

   
1② 、两个角重合之处采纳组合层叠的章程开始展览渲染,而不是纯净的采纳某一种体制,而四条边框则非重合(单一选用某一条边举办渲染)

   
1叁 、下面多少个角中国水力电力对国有集团业平方向紧贴着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冲突且在表格第1行发生争论时,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>

 最首要知识点

一 、利用:nth-child(n)选拔器采用高亮列/行

   
二 、当边框样式为实线时,运用double优先级比solid高的风味,覆盖solid样式

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

   
肆 、运用’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

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

方今的话

  在CSS出现在此以前,table成分通常用来布局。那种做法在HTML4自此不再推荐应用。而明日多少矫枉过正,使用table显示数据都大概会被说不专业。本文将详细介绍HTML表格table

 

HTML5/CSS3贯彻五彩进程条应用,html5css3进程条

明天要介绍的是一款基于HTML5和CSS3的进程条应用,这款进程条是静态的,仅提供进程条的多彩外观。当然你能够在CSS中动态设置进程值来让其变得动态,二个很好的完结方式是使用jQuery动态改变CSS中的进程值,让进度条实时动起来。具体效果大家能够看演示。

澳门葡京 17

你也能够在那边查看在线演示

接下去大家来分析一下这款进程条的源代码以及落实思路,代码首要由HTML和CSS组成,若是您需求动态改变进程值,也能够团结添加Javascript代码,也是相比较简单的。

作者:韩宇波

导语:table之间的边框存在共用问题,任其自然就存在冲突。既然存在冲突,那么就必定涉及到最终渲染哪2个体裁的题材。本文就器重研究当争论时有产生时,如何让浏览器遵照本身意思渲染争辩边框。在那篇小说中都有介绍,以及对表格的边框渲染原理实行了深度的剖析。

table

【暗中认可样式】

//IE7-浏览器不支持border-spacing
table{
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid gray;
}

【属性】

  1、border(在html5中,border只能为”1″或” “)(html5已废弃)

border="0"//没有边框
border="8"//8像素宽的边框

  2、cellpadding(px/%)(html5已废弃)

      规定单元边界与单元内容之间的距离

  3、cellspacing(px/%)(html5已废弃)

      规定单元格之间的区间

  4、summary(html5已废弃)

      表格内容的摘要

  5、width(html5已废弃)

      表格宽度      

<table border="2" cellpadding="5" cellspacing="3" summary="测试表格" width="300">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>    

  六 、frame(IE7-浏览器无法健康展现)(html5已遗弃)

描述
void 不显示外侧边框。
above 显示上部的外侧边框。
below 显示下部的外侧边框。
hsides 显示上部和下部的外侧边框。
vsides 显示左边和右边的外侧边框。
lhs 显示左边的外侧边框。
rhs 显示右边的外侧边框。
box 在所有四个边上显示外侧边框。
border 在所有四个边上显示外侧边框。

  柒 、rules(IE7-浏览器不能够平日展现)(html5已抛弃)

描述
none 没有线条。
groups 位于行组和列组之间的线条。
rows 位于行之间的线条。
cols 位于列之间的线条。
all 位于行和列之间的线条。

 

  <演示框>点击下列相应属性值可开始展览出现说法

【样式】

  1、border-spacing[可替代HTML属性cellspaing](IE7-不支持)

  [注意]唯有当border-collapse值为separate时,该样式才使得

border-spacing: x y
//x:水平间距 y:垂直间距。若只有一个值,则水平间距和垂直间距相等。注意,不可为负值。

  2、empty-cells(IE7-不支持) 

empty-cells: hide 不在空单元格周围绘制边框和背景,类似于hidden效果
empty-cells: show(默认) 在空单元格周围绘制边框和背景

  ③ 、CSS实际上有二种截然不一致的边框模型。按布局术语来说,假设单元格互相之间是相隔的,是相隔边框模型在起功效;另一种是联合边框模型,单元格边框会互相合并。

border-collapse:separate;

  [注意]在相隔边框模型中,无法为行、行组、列和列组织设立置边框。

border-collapse:collapse;

  在集合边框模型中,表格不可能设置内边距padding,且单元格边框之间也从没间隔。单元格之间的边框会在单元格间的假想表格线上居中,且表格宽度只包涵表格边框的一半

【边框合并的条条框框】

  a、有个别合并边框的border-style为hidden,它会优先于具有其余合并边框。这几个职位上的拥有边框都躲藏

  b、有个别合并边框的border-style为none,它的优先级最低

  c、宽边框优先于窄边框

  d、若宽度相同,double\solid\dashed\dotted\ridge\outset\groove\inset,优先级渐渐回落

  e、若样式也一律,cell\row\row group\column\column
group\table,优先级逐步降级

   <演示框>点击下列相应属性值可进展border-style的示范

  4、table-layout

table-layout:auto//自动宽度布局

【自动布局的步子】

  a、对于一列中的单元格,总括最小和最大单元格宽度

  b、对于各一列,计算最小和最大列宽

  c、若单元格跨列,最小列宽之和要对等跨列单元格最小单元格宽度

table-layout:fixed//固定宽度布局

  [注意]对于表单元格的长文本来说,使用word-wrap或word-break来强制换行,使用text-overflow实现公文溢出控制都需求安装table-layout:fixed

【固定布局的手续】

  a、width属性值不是auto的保有列成分会基于width值设置该列的增加率

  b、如若1个列的宽窄为auto,则依照该单元格设置此列宽度,假设跨多列,则上涨幅度平均分配

  c、就算列宽度仍为auto,则自动鲜明其尺寸,使其上涨幅度尽或然相等

  [注意]行使一定宽度布局,用户代理能够更快地质衡量算出表格的布局

  5、vertical-align

vertical-align: top;//顶端对齐
vertical-align: bottom;//底端对齐
vertical-align: middle;//中间对齐
vertical-align: baseline(默认);//基线对齐

  [注意]vertical-align:sub\super\text-top\text-bottom应用到表格单元格时会被忽略

 

HTML代码:

<section class="container">
    <div class="progress">
      20%
    </div>

    <div class="progress">
      40%
    </div>

    <div class="progress">
      60%
    </div>

    <div class="progress">
      80%
    </div>

    <div class="progress">
      100%
    </div>
  </section>

从HTML结构中大家得以见见,类名为progress的div是全体进程条的父容器,里面包车型大巴span则是最近进程,通过width来定义分歧的速度值,同时定义分歧的颜色类,比如orange,以便待会在CSS中展开体制渲染。

近年须要中有用到table,并在做必要的进度中遭受table
border的标题,在闲暇的小时把境遇的难点展开追究一番,收获颇多,特此分享;

【<tr><th><td>】

  <tr>行 table row 
  <th>表头 table head
  <td>表格数据 table data

【暗中同意样式】

th{
    padding: 1px;
    text-align: center;
    font-weight: bold;
}
td{
    padding: 1px;
}

【属性】

  1、colspan

  规定单元格可跨过的列数

  2、rowspan

  规定单元格可跨过的行数

  [注意]关于行的表格成分生成矩形框,这么些框有内容、内边距和边框,但是没有异地距margin。表头展现为居中的粗体文本

   <演示框>点击下列相应属性值可进行出现说法

 

CSS代码:

.progress {
  height: 20px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;
}
.progress > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  height: 18px;
  line-height: 16px;
  text-align: right;
  background: #cccccc;
  border: 1px solid;
  border-color: #bfbfbf #b3b3b3 #9e9e9e;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress > span > span {
  padding: 0 8px;
  font-size: 11px;
  font-weight: bold;
  color: #404040;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
.progress > span:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 18px;
  background: url("../img/progress.png") 0 0 repeat-x;
  border-radius: 10px;
}
.progress .green {
  background: #85c440;
  border-color: #78b337 #6ba031 #568128;
  background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
  background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
  background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
  background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%);
}
.progress .red {
  background: #db3a27;
  border-color: #c73321 #b12d1e #8e2418;
  background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
  background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
  background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
  background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
}
.progress .orange {
  background: #f2b63c;
  border-color: #f0ad24 #eba310 #c5880d;
  background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
  background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
  background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
  background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%);
}
.progress .blue {
  background: #5aaadb;
  border-color: #459fd6 #3094d2 #277db2;
  background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
  background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
  background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
  background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
}

此间大家对眼下HTML中定义的例外颜色的进程条举行了CSS定义,设置背景颜色、边框颜色以及接纳linear-gradient属性设置线性渐变的背景。看起来CSS代码卓殊不难,也尚无太多CSS3的事物。以上只是骨干代码,你也可以友善下载完整的代码研商。源码下载>>

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

【<col><colgroup>】

  <col> -> column 列

    为表格中1个或七个列定义属性值

  <colgroup> -> column group 列组

    对表格中的列实行理并了结合,以便对其举办格式化

【属性】

  span

  规定col成分应该横跨的列数

【样式】

  1、visibility:collapse

  该列或列组的保有单元格不显得(设置为此外值则不行)

  2、border

  唯有当border-collapse:collapse时,才能设置border

  3、background

  唯有当单元格及其行有晶莹剔透背景时,列或列组的背景才可知

  4、width

  定义列或列组的小小宽度

<table border="1" style="border-collapse: collapse">
  <colgroup span="2" style="width:100px; background-color: red"></colgroup>
  <col style="background-color: green; width:200px; border: 3px solid blue;" >
  <tr>
    <td>数字</td>
    <td>中文</td>
    <td>英文</td>
  </tr>
  <tr>
    <td>1</td>
    <td>一</td>
    <td>a</td>
  </tr>
  <tr>
    <td>2</td>
    <td>二</td>
    <td>b</td>
  </tr>
</table>

html5/CSS3做三个报表 自个儿菜鸟初学教导

代码如下。不匡助IE,请用FireFox或许Safair看成效。
此间首要选用了CSS3的多少个功用圆角边框“border-radius”,以及伪类采用器“E:nth-child(n)”。伪类”E:hover”不是CSS3的新成效,它的功效就是当鼠标悬停与E成分时样式产生改变。
亲,祝你成功哟!

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文书档案</title>
<style type=”text/css”>
.radius {
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
padding:5px;
}
.radius th {background-color:#0000ff;color:#ffffff;}
.radius tr:nth-child(odd) {background-color:#FF0000;}
.radius tr:nth-child(even) {background-color:#00ff00;}
.radius tr:hover{background-color:#FF0;}
</style>
</head>

<body>
<table width=”200″ class=”radius”>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr&……余下全文>>
 

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

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(默认值)

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

结论
a)上边几个角中国水力电力对外集团平方向紧贴着table边框的边很重大,要是border-style为hidden,则边框会溢出
b)垂直方向上不会产生溢出境况
c)溢出的边框不会占用文本流的长空

理由
实际实例能够查看border-style优先级

** 五 、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’

理由
能够到德姆o7启用审查工具逐层去掉’table-cell’,’table-row’,’table-row-group’,’table-col’,’table-col-group’,
‘table’边框,即可看到效果
七 、左上优先渲染原则 demo

结论
a)水平方向上:当三个单元格只存在颜色分裂的情景下,发生争辩的单元格相对较右边单元格的体裁
b)垂直方向上:当七个单元格只设有颜色不均等的图景下,爆发冲突的单元格相对较顶部单元格的体制

** 八 、border-style:double几个角的渲染情势
demo**

chorme

[图片上传退步…(image-cf4c00-1510037324774)]

FF

[图形上传失利…(image-8bde72-1510037324774)]

IE

[图表上传退步…(image-e7cfe4-1510037324774)]

结论
a)多个角重合之处接纳组合层叠的点子展开渲染,而不是纯粹的取舍某一种体裁,而四条边框则非重合(单一选用某一条边进行渲染)(chrome与IE,FF八个角重合之处不会使用组合层叠的艺术实行渲染)
b)能够看出在FF下,八个角重合之处渲染优先级是,垂直方向上的多少个相邻单元格,绝对偏下的单元格的冲突边实行渲染

理由
从“中”那些单元格的四个角能够看出,三个角除了会的平底是有任何叫层叠而来,而不是十足的去挑选某种边框去渲染

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

[图形上传战败…(image-3daf7-1510037324774)]

结论
a)border-style:double;宽度须求大于等于3px才能反映,不然,样式与solid无差别
b)border-style:double;会爆发溢出,并且左右溢出值不等同

⑩ 、border-style:ridge与border-style:groove的表现方式 demo

结论
a)table2 ~ table5爆发争论边渲染情形能够汲取 ridge > groove
b)当ridge 与 groove争辨并且在报表 非
第二行产生争辨时,四个抵触单元格的左上角和右上角以及争辩边的上角都设不寻常
c)从table② 、table叁 、table4中得以看到,当outset 与 inset冲突且在表格 非
第壹行爆发争持时,groove ==> outset, ridge ==> inset

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

1壹 、border-style:outset与border-style:inset的展现情势
demo

结论
a)从table2~table5产生抵触边渲染情形能够汲取 outset > inset
b)从table② 、table肆 、table5中能够看来,当outset 与
inset冲突且在报表第叁行爆发顶牛时,四个抵触单元格的左上角和右上角以及冲突边的上角都存在难点
c)从table贰 、table④ 、table5中得以看来,当outset 与
inset争论且在表格第②行爆发顶牛时,outset ==> groove, inset ==>
ridge

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

1贰 、border-style:outset与border-style:ridge的表现格局
demo

结论
a)table2~table5发生争辩边渲染情形能够汲取 ridge > outset
b)多少个单元格产生争论未来,左上角都存在渲染难点
c)当outset 与
inset争论且在报表第三行爆发争论时,五个争辨单元格的左上角和右上角以及争论边的上角都留存难点
d)综合上部呈现能够阅览,当五个单元格产生争论现在,处于表格的结尾一行时,争辨边的上部(角)存在渲染难点
e)综合上部表现能够见见,outset未产生争论的边框的上部角会现身渲染难点

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

**
1三 、border-style:groove与border-style:inset的表现情势demo**

结论
a)table2~table5爆发争辩边渲染情状能够汲取 groove > inset
b)groove与outset可以互相转化,ridge与inset能够互相转化

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

1肆 、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;属性,单元格(只是边框,内容不变)并不会左右交替,而是边框向后推了(最终三个边框选用了渲染成首个边框,倒数第3个边框渲染成倒数第多少个边框,依此列推)
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

其余表格成分

【<thead><tbody><tfoot>】

<thead>表格页眉
<tbody>表格主体
<tfoot>表格页脚

  [注意]它们的产出程序是:thead、tfoot、tbody,那样浏览器就足以在接受全体数据前表现页脚 

  【<caption>表格标题】  

  【私下认可样式】

caption{
    text-align: center;
}

  【样式】

caption-side: top(默认)
caption-side: bottom

  [注意]<caption>标签必须紧随<table>标签之后,且只可以对各样表格定义1个题名

<table border="1" >
  <caption style="caption-side:bottom">北京天气</caption>
  <thead>
    <tr>
      <th>地区</th>
      <th>天气</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>北京</td>
      <td>都雾霾</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>城八区</td>
      <td>雾霾</td>
    </tr>
    <tr>
      <td>郊区</td>
      <td>雾霾</td>
    </tr>
  </tbody>
</table>

 

正在做网站,怎实现进程条是圈子的?笔者用的是html+css制作网站有代码最好没有得以说说原理,

壹 、html5直接就可用css3的性质去做圆形,border-radius即可完毕圆角。
贰 、图片方式,左右两侧做圆角图片,衔接好,即可兑现,但左侧的急需在技能时开始展览转移
叁 、背景方式,做左右两侧背景观+圆角png透明背景,背景采取颜色填充即可。
④ 、接纳插件,近期有诸多jquery进度条插件可用,在bootstrap中也有很好的插件。
 

前几日要介绍的是一款基于HTML5和CSS3的进程条应用,这款进程条是静态的,仅提供进度条的五彩…

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

上边分享了部分实用表格时,常遭逢的一对争论;

上边内容是对上述文章中关系的有个别知识点加以利用,用到现实的例子上。

动用表格布局最远能够追溯到上个世纪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优先级较低的特点。

display

table{display: table;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td,th{display: table-cell;}
col{display: table-column;}
colgroup{display: table-column-group;}
caption{display: table-caption;}

    [注意]IE7-浏览器不支持为HTML元素设置与表格有关的display值

 

开卷推荐

一站式满意电商节云计算须求的妙方
Web 前端性能优化 :
怎么样有效提高静态文件的加载速度
白夜追凶 :手 Q
图片的体现和发送逻辑

此文已由小编授权腾讯云技术社区公布,转发请表明小说出处
初稿链接:
https://cloud.tencent.com/community/article/846600

匿名表格对象

  CSS定义了一种机制,将遗漏的组件作为匿名对象插入。详细插入规则如下:

  1、假诺table-cell成分的父成分不是table-row成分,则插入匿名table-row对象

  贰 、借使table-row成分的父成分不是table、inline-table或table-row-group成分,则插入匿名table元素

  叁 、要是table-column成分父成分不是table、inline-table或table-row-group成分,则插入匿名table成分

  四 、假使table-row-group、table-header-group、table-footer-group、table-column-group或table-caption的父成分不是table成分,则插入匿名table成分

  伍 、借使table成分或inline-table成分的子成分不是table-row-group、table-header-group、table-footer-group、table-column-group或table-caption,则插入匿名table-row元素

  六 、假诺table-row-group、table-header-group、table-footer-group元素的子成分不是table-row成分,则插入匿名table-row成分

  柒 、要是table-row成分的子成分不是table-cell成分,则插入匿名tabel-cell成分

澳门葡京 18

 

表格层

   CSS定义了四个分裂的层,对应表各种方面包车型客车体裁都在其个其余层上绘制。暗中认可地,全数因素背景都以晶莹剔透的,假若单元格、行、列等尚未协调的背景,则table成分的背景将透明这一个内部因素可知。

澳门葡京 19

  <演示框>点击下列相应属性值可开始展览出现说法

 

边距设置

【<table>】

  若处于分隔边框模型,margin和padding都可安装

  若处于合并边框模型,只可设置margin

【<thead><tbody><tfoot><tr><col><colgroup>】

    margin和padding都不足设置

【<td><th>】

    不可设置margin,但足以设置padding

【<caption>】

    margin和padding都可设置 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website