html table實現無左右邊框布局
阿新 • • 發佈：2017-10-12
span text 會有 fixed -a port sca set fix
這是一個普通的表格，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實現無左右邊框布局