使用css样式代替原生table组件的方法

mini云码 发布日期： 2025-11-10 02:07

table组件的可控性往往没有div灵活，使用div+css样式，其实也可以实现table的表格显示功能，比如css样式：

	.table{
		border-left:1px solid #e1e1e1;
		border-top: 1px solid #e1e1e1;
		position: relative;
	}
	.tr{
		display: flex;
		align-items: center;
		width: 100%;
	}
	
	.trfixed{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
	
	.th{
		padding: 8px;
		background-color: #ff8283;
		border-right:1px solid #ff8283;
		border-bottom: 1px solid #ff8283;
		height: 38px;
		font-size: 12px;
		color: #fff;
	}
	
	.td{
		padding: 8px 4px;
		height: 38px;
		background-color: #ffffff;
		border-right:1px solid #e1e1e1;
		border-bottom: 1px solid #e1e1e1;
		font-size: 12px;
	}

然后html里引用：

<div class="table" style="width: 500px;">
   <div class="tr">
	   <div class="th" style="width:150px;text-align: center;"> ip</div>
	   <div class="th" style="width:80px;text-align: center;">端口</div>
	   <div class="th" style="width:100px;text-align: center;">用户名</div>
	   <div class="th" style="flex: 1;text-align: center;">关系</div>
	   <div class="th" style="width:150px;text-align: center;">当前状态</div>
	   <div class="th" style="width:150px;text-align: center;">操作</div>
   </div>
   
   <div v-for="(item,index) in sshList" class="tr" :key="'Item'+index">
	   <div class="td" style="width:150px;text-align: center;">{{item.host}}</div>
	   <div class="td" style="width:80px;text-align: center;">{{item.port}}</div>
	   <div class="td" style="width:100px;text-align: center;">{{item.username}}</div>
	   <div class="td" style="flex: 1;text-align: center;">。。。。</div>
	  <div class="td" style="width:150px;text-align: center;">。。。</div>
	  <div class="td" style="width:150px;text-align: center;">。。。。</div>
   </div>
</div>