数据样式

表格

表格可以非常快速的部署数据，灵活控制表格样式是必要的。表格不能设置外边距。

当脱离UI框架是否还会实现想要的效果?

定制表格

除了使用 table 标签绘制表格外，也可以使用display 样式绘制。

样式规则	说明	描述
table	对应 table	<table></table>
table-caption	对应 caption 表格标题	<caption><h3>表格的标题</h3></caption>
table-row	对应 tr	<tr></tr>
table-row-group	对应 tbody	<tbody><tr><td>January</td></tr></tbody>
table-header-group	对应 thead 表头	<thead><tr><th>Month</th></tr></thead>
table-footer-group	对应 tfoot	<tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot>

<style>
.table {
    display: table;
    border: solid 1px #ddd;
}

.table nav {
    display: table-caption;
    text-align: center;
    background: black;
    color: white;
    padding: 10px;
}

.table section:nth-of-type(1) {
    font-weight: bold;
    display: table-header-group;
    background: #555;
    color: white;
}

.table section:nth-of-type(2) {
    display: table-row-group;
}

.table section:nth-of-type(3) {
    display: table-footer-group;
    background: #f3f3f3;
}

.table section ul {
    display: table-row;
}

.table section ul li {
    padding: 10px;
    display: table-cell;
    border: solid 1px #ddd;
}
</style>

<article class="table">
    <nav>Javascript</nav>
    <section>
        <ul>
            <li>标题</li>
            <li>说明</li>
        </ul>
    </section>
    <section>
        <ul>
            <li>node.js</li>
            <li>服务端语言</li>
        </ul>
        <ul>
            <li>vue.js</li>
            <li>前端热门的框架</li>
        </ul>
    </section>
    <section>
        <ul>
            <li>Es6</li>
            <li>学习阮大神的吧</li>
        </ul>
    </section>
</article>

表格标题

通过 caption-side 可以设置标题位置，值可以设置为 top | bootom。

table caption {
    background: black;
    color: white;
    padding: 10px;
    caption-side: top;
    /*caption-side: bottom;底部*/ 
}

表格内容对齐

水平对齐使用 text-align 文本对齐规则

<style>
table tr td {
    height: 100px;
    text-align: center;
 }
</style>

垂直对齐使用 vertical-align 处理

属性	说明
top	顶对齐
middle	垂直居中
bottom	底部对齐

<style>
table tr td {
    height: 100px;
    vertical-align: bottom;
    text-align: center;
  }
</style>

使用选择器设置表格隔行变色

 table thead tr {
    background: #118d68;
    color: #fff;
}

<!--奇数行-->
table tbody tr:nth-child(odd) {
    background: #1bb385;
    color: white;
}

单元格间距

设置间距上下10px ，左右 50px。

table {
    border-spacing: 50px 10px;
}

边框合并

默认表格边框间是有间距的，以下代码将边框合并形成细线表格。

table {
  border-collapse: collapse;
}

隐藏单元格

<style>
table {
    empty-cells: hide;
    /*内容为空的将不显示*/
 }
</style>

无边框表格

 table {
    border: none;
    border-collapse: collapse;
}
table td {
    border: none;
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}
table tr:first-child td {
    border-top: solid 1px #ddd;
}
table td:last-child {
    border-right: none;
}
/* 使用伪类实现hover变背景色*/
table tr:hover {
    background: #ddd;
    cursor: pointer;
}

列表

列表符号

使用 list-style-type 来设置列表样式，规则是继承的，所以在ul 标签上设置即可。

隐藏列表符号

ul {
  list-style-type: none;
}

自定义列表符号样式

ul li {
  /*
  list-style-image: url(xxx.png);
  list-style-image: radial-gradient(10px 10px, red, black); 
  */
  list-style-image: linear-gradient(45deg, red, black);
}

符号位置

控制符号显示在内容外面还是内部

选项	说明
inside	内部
outside	外部

ul {
  list-style-position: inside;
}

样式和位置组合定义

ul {
    list-style: circle inside;
}

背景图做列表符

ul li {
  background: url(xj-small.png) no-repeat 0 6px;
  background-size: 10px 10px;
  list-style-position: inside;
  list-style: none;
  text-indent: 15px;
}

追加内容

基本使用

使用伪类 ::before 向前添加内容，使用 ::after 向后面添加内容。

a::after {
  content: " (javascript) ";
}

追加属性

使用属性值添加内容，可以使用标准属性与自定义属性。

<p title="我的博客地址">jc-sir.giuhb.io</p>

p::after{
    content: attr(title);
}