表格行与列边框样式管理的规律深入分析及实战
分类:前端技术

报表边框你知多少

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

初藳出处: 腾讯isux   

table之间的边框存在共用难题,听天由命就存在冲突。既然存在冲突,那么就断定涉及到终极渲染哪贰个体制的问题。本文就主要研讨当冲突产生时,怎么样让浏览器依照自身意愿渲染冲突边框。在这里篇小说中都有介绍,以至对表格的边框渲染原理进行了纵深的深入解析

pc28.am神测网 1

规律解析

表格行与列边框样式管理的规律分析

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

pc28.am神测网 2

结论

    a卡塔尔当且仅当七个相邻产生冲突的边框的border-style为none时,冲突边框才不会呈现

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

pc28.am神测网 3

结论

    a卡塔 尔(阿拉伯语:قطر‎border-style:hidden;边框的刚开始阶段级高于solid样式的边框

3、border-style优先级

pc28.am神测网 4

结论

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

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

结论

    a卡塔 尔(阿拉伯语:قطر‎下面多个角中国水力电力对外公司平方向紧贴着table边框的边很珍视,假如border-style为hidden,则边框会溢出

    b卡塔尔垂直方向上不会发出溢出情形

    c卡塔尔溢出的边框不会据有文本流的空间

理由

    具体实例能够查阅border-style优先级

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

pc28.am神测网 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优先级

pc28.am神测网 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、左上优先渲染原则

pc28.am神测网 7

结论

    a卡塔尔国水平方向上:当五个单元格只设有颜色不平等的景色下,发生冲突的单元格相对较左边单元格的体制

    b卡塔 尔(阿拉伯语:قطر‎垂直方向上:当四个单元格只设有颜色非常的小器晚成致的事态下,产生冲突的单元格相对较顶上部分单元格的样式

8、border-style:double多少个角的渲染形式

chorme

pc28.am神测网 8

FF

pc28.am神测网 9

IE

pc28.am神测网 10

结论

    a卡塔 尔(阿拉伯语:قطر‎四个角重合之处接纳组合层叠的方法开展渲染,并非单生龙活虎的取舍某大器晚成种体制,而四条边框则非重合(单生机勃勃选用某一条边进行渲染卡塔 尔(阿拉伯语:قطر‎(chrome与IE,FF八个角重合之处不会选拔组合层叠的主意展开渲染卡塔尔国

    b卡塔尔国可以看到在FF下,多少个角重合的地方渲染优先级是,垂直方向上的四个相邻单元格,相对偏下的单元格的冲突边举办渲染

理由

pc28.am神测网,    从“中”这一个单元格的八个角能够看出,多少个角除了会的平底是有任何叫层叠而来,并非十足的去挑选某种边框去渲染

9、border-style:double表现方式

pc28.am神测网 11

结论

    a卡塔尔国border-style:double;宽度需求大于等于3px技艺反映,不然,样式与solid无差距

    b卡塔尔border-style:double;会时有爆发溢出,而且左右溢出值不豆蔻年华致

10、border-style:ridge与border-style:groove的展现情势

结论

    a)table2 ~ table5发生冲突边渲染情状可以摄取 ridge > groove

    b卡塔 尔(英语:State of Qatar)当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卡塔 尔(英语:State of Qatar)从table2、table4、table5中能够看来,当outset 与 inset冲突且在报表第意气风发行发生冲突时,多少个冲突单元格的左上角和右上角以致冲突边的上角都设反常

    c卡塔尔从table2、table4、table第55中学得以看来,当outset 与 inset冲突且在表格第生机勃勃行产生矛盾时,outset ==> groove, inset ==> ridge

理由

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

12、border-style:outset与border-style:ridge的表现情势

结论

    a)table2~table5产生冲突边渲染意况能够摄取 ridge > outset

    b卡塔尔国八个单元格发生冲突以往,左上角都存在渲染难题

    c卡塔 尔(英语:State of Qatar)当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的影响

pc28.am神测网 12

FF

pc28.am神测网 13

结论

    a卡塔 尔(英语:State of Qatar)tr上行使direction: rtl;属性,单元格(只是边框,内容不变卡塔尔并不会左右轮流,而是边框向后推了(最终一个边框选择了渲染成第1个边框,尾数第二个边框渲染成倒数第七个边框,依此列推卡塔尔

    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上设置该属性卡塔 尔(英语:State of Qatar)有关。若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卡塔 尔(英语:State of Qatar)在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超多用来数据突显,数据体现自然会涉及到多少的对待,优越着重数据的要求。由此则发出了就如下图的来得样式。

pc28.am神测网 14

pc28.am神测网 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 评论

pc28.am神测网 16

款待大家前往Tencent云社区,获取越来越多Tencent海量才具实施干货哦~

bootstrap之表格的粗略用法,加载bootstrap后直接采纳,也可重定新定样式

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

作者:韩宇波

导语:table之间的边框存在共用难题,任其自流就存在冲突。既然存在冲突,那么就势必涉及到结尾渲染哪贰个样式的标题。本文就非同常常商量当冲突时有产生时,怎么着让浏览器根据本身希望渲染冲突边框。在这里篇小说中都有介绍,以致对表格的边框渲染原理进行了深度的解析。

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

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

前些天供给中有用到table,并在做须要的长河中相见table border的题目,在空闲的大运把蒙受的难点张开研究黄金时代番,收获颇多,特此分享;

<div class="table-responsive">  通过把自由的 .table 包在 .table-responsive class 内,您能够让表格水平滚动以适应迷你设备(小于 768px卡塔尔。当在过量 768px 宽的巨型设施上查看时,您将看不到任何的差异。

/*表头在此个DIV内*/
.title {
width: 500px; /*那些宽度须要与下部的内容的DIV相等*/
}

废话相当少说,直接上干货!

<table class="table">

/*报表样式*/
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;
}

表格行与列边框样式管理的原理解析

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卡塔 尔(英语:State of Qatar)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'边框,就可以看出效果
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卡塔 尔(英语:State of Qatar)从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卡塔 尔(英语:State of Qatar)从table2、table4、table5中得以观察,当outset 与 inset冲突且在表格第生龙活虎行发生冲突时,多个冲突单元格的左上角和右上角以致冲突边的上角都设反常
c卡塔尔从table2、table4、table第55中学得以观望,当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卡塔尔国综合上部显示能够看出,当三个单元格发生冲突以往,处于表格的尾声后生可畏行时,冲突边的上部(角卡塔 尔(英语:State of Qatar)存在渲染难点
e卡塔 尔(英语:State of Qatar)综合上部突显能够见到,outset未产生冲突的边框的上部角会现身渲染难点

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

** 13、border-style:groove与border-style:inset的表现格局demo**

结论
a)table2~table5产生矛盾边渲染情状能够得出 groove > inset
b卡塔 尔(英语:State of Qatar)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;属性,单元格(只是边框,内容不改变卡塔 尔(英语:State of Qatar)并不会左右轮番,而是边框向后推了(末了叁个边框采取了渲染成第一个边框,尾数第2个边框渲染成尾数第多个边框,依此列推卡塔 尔(英语:State of Qatar)
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上设置该属性卡塔 尔(英语:State of Qatar)有关。若direction:ltr属则利用相对较侧边的要素样式,若direction:rtl属则接受相对较侧面的成分样式;垂直方向上:当多个单元格只存在颜色不一致等的情形下,较左近最上端的边框样式将被渲染;
  • 两个角重合之处选拔组合层叠的主意打开渲染,实际不是单纯的选料某意气风发种体裁,而四条边框则非重合(单生机勃勃接受某一条边举办渲染卡塔尔国
  • 地点多个角中水平方向紧贴着table边框的边很注重,假设border-style为hidden,则边框会,溢出垂直方向上不会时有产生溢出情状,溢出的边框不会占领文本流的空中

别的开采有的包容性难题:

  • 水平方向上:当多个单元格只设有颜色不相符的事态下,冲突边界渲染的体制与direction(tr上设置该属性在chrome有效,在别的浏览器上安装无其他功用卡塔 尔(英语:State of Qatar)有关。若direction:ltr属则使用相对较左侧的成分样式,若direction:rtl属则引致渲染格外(不能够解释卡塔 尔(英语:State of Qatar)
  • 多个角重合的地方选择组合层叠的办法进行渲染,并不是单大器晚成的抉择某生龙活虎种样式,而四条边框则非重合(单大器晚成选用某一条边举办渲染卡塔尔国(chrome与IE卡塔尔国
  • 在FF下,FF多个角重合之处不会选取组合层叠的情势举办渲染,八个角重合之处渲染法规是运用垂直方向上的多少个相邻单元格,相对偏下的单元格的冲突边进行渲染
  • a卡塔尔在FF和IE下,ridge和inset渲染是平等的,groove和outset渲染是平等的;

b卡塔 尔(英语:State of Qatar)在chrome下,当outset 与 inset冲突且在表格第生机勃勃行产生冲突时,outset ==> groove, inset ==> ridge,当outset 与 inset冲突且在表格 非 第生机勃勃行产生冲突时,groove ==> outset,ridge ==> inset

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

/*容纳表格内容的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优先级超级低的特点。

   <thead>

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

阅读推荐

一整套满足电孟秋云总计必要的妙方
Web 前端质量优化 : 如何有效升高静态文件的加载速度
白夜追凶 :手 Q 图片的显得和出殡和下葬逻辑

此文已由作者授权Tencent云工夫社区颁发,转发请注解作品出处
原稿链接:
https://cloud.tencent.com/community/article/846600

      <tr>

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

         <th>名称</th>

         <th>城市</th>

      </tr>

   </thead>

   <tbody>

      <tr class="active">

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

         <td>Bangalore</td>

      </tr>

      <tr class="success">

         <td>Tanmay</td>

         <td>Bangalore</td>

      </tr>

      <tr class="info">

         <td>Sachin</td>

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

      </tr>

      <tr class="warning">

         <td>Sachin</td>

         <td>Mumbai</td>

      </tr>tbody>

      <tr class="danger">

         <td>Sachin</td>

         <td>Mumbai</td>

      </tr>tbody>

</table>

</div>

 表格类

 <table class="table table-striped">          在 <tbody> 内加多斑马线方式的条纹 ( IE8 不扶植)

 

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

 

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

 

<table class="table table-condensed">        让表格越发紧密

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

.active         对某后生可畏特定的行或单元格应用悬停颜色

.success            表示一个打响的或积极的动作

.warning            表示叁个急需留意的警戒

.danger         表示三个生死攸关的或地下的消极的一面动作

.info                  表示音信变化的操作


本文由pc28.am发布于前端技术,转载请注明出处:表格行与列边框样式管理的规律深入分析及实战

上一篇:模块讲解,的一次更新说明 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 遇见未知的,web开采连忙入门
    遇见未知的,web开采连忙入门
    CSS 框架 Bulma 教程 2017/10/26 · CSS ·Bulma 原文出处:阮一峰    网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS框架,
  • 追踪客户,读书笔记
    追踪客户,读书笔记
    使用 CSS 追踪用户 2018/01/20 · CSS · 1评论 ·追踪 原文出处:jbtronics   译文出处:枫上雾棋    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行
  • pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    CSS技巧:逐帧动漫抖动实施方案 2017/08/16 · CSS ·动画 原来的书文出处:坑坑洼洼实验室    我所在的前端共青团和少先队首要从事活动端的H5页面开荒,而
  • 跟随我在oracle学习php,HTML中form表单的用法
    跟随我在oracle学习php,HTML中form表单的用法
    表单元素之搭车系 2016/01/28 · HTML5 ·表单 原文出处:司徒正美(@司徒正美)    对于表单元素, 除了reset元素,只要有name与value都能提交 因为在我们印象
  • Codecademy为编程初学者新增HTML和CSS两门课程,可以
    Codecademy为编程初学者新增HTML和CSS两门课程,可以
    Codecademy为编制程序初读书人新添HTML和CSS两门学科 2012/04/03 · CSS · 来源:伯乐在线     ·CSS 葡萄牙语原来的文章:Mashable  编译:伯乐在线– 黄利民 乐