微信小程序表格的实现（纯css 表格的实现）

display:table的用法

大多数开发环境中，已经基本不用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"
					]
				],
				
			}
		},

效果展示：