分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

html table实现无左右边框布局

发布时间:2023-09-06 01:16责任编辑:白小东关键词:暂无标签

这是一个普通的表格,border=1,每个td都会有边框。

放手机里,table的左右边框明显有点多余且不美观。

那么如何去掉呢?

因为表格边框最终还是取决于td的。操作整个table的边框无法实现效果。

实现思路如下:

1、table的边框只留上边框和下边框 

.table{  border-top: 1px solid #e8e8e8;  border-bottom:1px solid #e8e8e8;}

2、th或td的边框最左边不要

.table td,.table th{ ??border:1px solid #e8e8e8;  border-left:none;}

3、这时候表格最右边还有边框,可以用这个去除

.table tr th:last-child{border-right:none;}.table tr td:last-child{border-right:none;}

最终的效果,table左边和右边的边框去除了:

最后贴下源码

<html> ???<head> ???????<meta charset="UTF-8"> ???????<meta content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" name="viewport"/> ???????<meta content="telephone=no,email=no,date=no,address=no" name="format-detection"/> ???????<style> ???????*{margin:0;padding:0;} ???????.table{table-layout: fixed;font-size:13px;width:100%;text-align:center;margin-top:10px; ???????????border-top: 3px solid #e8e8e8;border-bottom: 3px solid #e8e8e8;border-collapse:collapse;} ???????.table th{background:#F0F4FB;} ???????.table th,.table td{height:45px;border:3px solid #e8e8e8;border-left:none;} ???????.table tr th:last-child{border-right:none;} ???????.table tr td:last-child{border-right:none;} ???????</style> ???</head> ???<body> ???????<table class="table" cellpadding="0" > ???????????<tr> ???????????????<th>姓名</th> ???????????????<th>年龄</th> ???????????????<th>成绩</th> ???????????????<th>班级</th> ???????????</tr> ???????????<tr> ???????????????<td>张三</td> ???????????????<td>15</td> ???????????????<td>230</td> ???????????????<td>42</td> ???????????</tr> ???????????<tr> ???????????????<td>李四</td> ???????????????<td>16</td> ???????????????<td>180</td> ???????????????<td>43</td> ???????????</tr> ???????????<tr> ???????????????<td>王五</td> ???????????????<td>15</td> ???????????????<td>250</td> ???????????????<td>42</td> ???????????</tr> ???????</table> ???</body></html>

html table实现无左右边框布局

原文地址:http://www.cnblogs.com/xin-yu/p/7653195.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved