大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css为什么不用table系表格元素呢？
1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大
2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示
3、非表格内容用table来装，不符合标签语义化要求，不利于SEO
4、table的嵌套性太多，用DIV代码会比较简洁
项目中又需要类似表格的布局怎么办呢？可以用display:table来解决
display:table系列几乎是和table系的元素相对应的，请看下表：
table（类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。inline-table（类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。table-row-group（类似 <tbody>）此元素会作为一个或多个行的分组来显示。table-header-group（类似 <thead>）此元素会作为一个或多个行的分组来显示。table-footer-group（类似 <tfoot>）此元素会作为一个或多个行的分组来显示。table-row（类似 <tr>）此元素会作为一个表格行显示。table-column-group（类似 <colgroup>）此元素会作为一个或多个列的分组来显示。table-column（类似 <col>）此元素会作为一个单元格列显示。table-cell（类似 <td> 和 <th>）此元素会作为一个表格单元格显示。table-caption（类似 <caption>）此元素会作为一个表格标题显示。
（1）div模拟表格
HTML代码
<view class="su-table-box"> <view class="su-table"> <!-- 表格标题 --> <view class="su-tr"> <view class="su-th" v-for="(list,index) in th" :key="index">{{list}}</view> </view> <!-- 表格内容 --> <view class="su-tr" v-for="(list,index) in td" :key="index"> <view class="su-td" v-for="(item,index_) in list" :key="index_">{{item}}</view> </view> </view> </view>CSS代码--使用的是scss格式
// css表格实现 .su-table-box { height: 100%; margin: 0rpx 30rpx; overflow-x: auto; padding-bottom: 40rpx; .su-table { margin-top: 50rpx; display: table; border-collapse: collapse; //合并边框 overflow-x: auto; // 宽度不能设置，要完全显示可以用 word-break: keep-all; // 设置不换行 white-space: nowrap; background-color: #FFFFFF; } .su-tr { display: table-row; //此元素会作为一个表格行显示（类似 <tr>） } .su-th { display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>） height: 60rpx; line-height: 60rpx; text-align: center; border: 1rpx solid #DDDDDD; border-right: none; border-bottom: none; background-color: #87CEFA; color: #FFFFFF; } .su-td { padding: 0rpx 30rpx; display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>） height: 60rpx; line-height: 60rpx; text-align: center; border: 1rpx solid #DDDDDD; border-right: none; } }JS代码
data() { return { // 表格标题 th: ["姓名", "手机号", "所属社区", "性别", "昵称", "住址", "备注信息", "生成编号"], // 表格内容 这里只能使用 数组套数组格式 td: [ [ "滴滴滴", "18399997777", "多喝水", "中性", "护手霜", "好的好的记得记得你电话", "湖南省长沙市岳麓区", "SCV00000001" ], [ "滴滴滴2", "18399997777", "多喝水", "中性", "护手霜", "好的好的记得记得你电话哈哈哈", "湖南省长沙市岳麓区", "SCV00000001" ], [ "滴滴滴3", "18399997777", "多喝水", "中性", "护手霜", "好的好的记得记得你电话", "湖南省长沙市岳麓区", "SCV00000001" ], [ "滴滴滴4", "18399997777", "多喝水", "中性", "护手霜", "好的好的记得记得你电话", "湖南省长沙市岳麓区", "SCV00000001" ] ], } },效果展示：
