html表格展开格式,4款简单常见的纯CSS表格（table）样式本⽂介绍4款简单常见的纯CSS表格(table)样式。
1、默认表格(default table)
添加pure-table类样式化表格， 此类向表元素添加填充(padding)和边框(borders)，并使表头突出。
默认表格
html代码html>
Table_Simple CSS for HTML tables
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
.pure-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
.pure-table caption {
color: #000;
font: italic 85%/1 arial,sans-serif;
padding: 1em 0;
text-align: center;
}
.pure-table td,.pure-table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: .5em 1em;
}
.pure-table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.pure-table td {
background-color: transparent;
}
#MakeModelYear
1HondaAccord20092ToyotaCamry20123HyundaiElantra2010
2、加边框的表格(Bordered Table)
为所有单元(cells)添加垂直和⽔平边框，⽤pure-table-bordered样式化表格
加边框的表格(Bordered Table)
html代码html>
Table_Simple CSS for HTML tables
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
.pure-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
.pure-table caption {
color: #000;
font: italic 85%/1 arial,sans-serif;
padding: 1em 0;
text-align: center;
}
.
pure-table td,.pure-table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: .5em 1em;
}
.pure-table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.pure-table td {
background-color: transparent;
}
.pure-table-bordered td {
border-bottom: 1px solid #cbcbcb;
}
.pure-table-bordered tbody>tr:last-child>td {
border-bottom-width: 0;
}
#MakeModelYear
1HondaAccord20092ToyotaCamry20123HyundaiElantra2010
3、只有⽔平边框的表格(Table with Horizontal Borders)
如果你喜欢只要⽔平线边框的表格，那么添加pure-table-horizontal类到表格
只有⽔平边框的表格
html代码html>
Table_Simple CSS for HTML tables html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
.pure-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
.pure-table caption {
color: #000;
html网页设计 table
font: italic 85%/1 arial,sans-serif;
padding: 1em 0;
text-align: center;
}
.pure-table td,.pure-table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: .5em 1em;
}
.
pure-table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.pure-table td {
background-color: transparent;
}
.pure-table-horizontal td,.pure-table-horizontal th {
border-width: 0 0 1px 0;
border-bottom: 1px solid #cbcbcb;
}
.pure-table-horizontal tbody>tr:last-child>td {
border-bottom-width: 0;
}
#MakeModelYear
1HondaAccord20092ToyotaCamry20123HyundaiElantra2010
4、条纹表格(Striped Table)
当表格较长的时候，通常会⽤到条纹表格，这样更容易区分数据。在需要改变背景颜⾊的⾏tr元素添加pure-table-odd类，便能实现斑马样式的效果。
条纹表格(Striped Table)
html代码html>
Table_Simple CSS for HTML tables
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。