简述
如今我们写表格大部分都依赖于ui框架。当然有些场景表格使用的很少，且功能简单。引入某个ui框架就显得多余，就简单的用div实现一下了。
先看看带斑马纹表格的样式：
css小知识
我们常用的display属性值有：
display: inline | inline-block | block | none
display: flex | grid
...还有很多
目前我们用到的关键属性：
display: table /* 作为表格<table>来显示 */
display: table-row /* 作为一个表格的行显示<tr> */
display: table-cell /* 作为表格一个单元格来显示类似<th> <td> */
... 还有一些，详细看菜鸟教程
实现
实现起来其实很简单，我们进行简单的布局：
<!-- 表格外层 -->
<div class="table-wrap">
<!-- 表头 -->
<div class="table-row">
<!-- 表格单元格 -->
<div class="th">产品</div>
<div class="th">单价</div>
<div class="th">数量</div>
<div class="th">计费</div>
</div>
<!-- 表格内容 -->
<div class="table-row table-th">
<!-- 表格单元格 -->
<div class="td">影子工作室</div>
<div class="td">￥360.00</div>
<div class="td">1</div>
<div class="td">￥360.00</div>
</div>
</div>
</div>
然后就是样式了：
<style>
.table-wrap {
/* 用表格形式展示 */
display: table;
width: 100%;
border: 2px solid #DCDCDC;
border-radius: 12px;
}
.table-row {
/* 展示行 */
display: table-row;
text-align: center;
}
.table-row .th {
/* 展示表头单元格 */
display: table-cell;
padding: 16px 0;
color: #7d7b84;
font-size: 24px;
line-height: 44px;
border-bottom: 1px solid #E5E6EB;
}
.table-row .td {
/* 展示内容单元格 */
display: table-cell;
padding: 16px 0;
overflow: hidden;
color: #050231;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24px;
line-height: 44px;
}
/* 这个加上一个斑马纹 */
.table-th:nth-child(2n + 1) {
background: #F2F3F7;
}
</style>
参考文档
// 菜鸟教程 display 属性
https://www.runoob.com/cssref/pr-class-display.html
