胖蔡说技术
随便扯扯

如何通过CSS实现去除table边框线?

在开发中需要将table的边框线去除,那么如何去除table的边框线呢?本文将从CSS设置的方式来实现去除table边框线的功能。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>去除table的边线</title>
</head>
<body>
<table>
  <tr>
    <td>学号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>01</td>
    <td>文**</td>
    <td>女</td>
    <td>20</td>
  </tr>

   <tr>
    <td>02</td>
    <td>蔡**</td>
    <td>男</td>
    <td>29</td>
  </tr>
</table>
</body>
</html>

解决方法:

1、去除边框线间距

<table cellpadding="10px" cellspacing="0px" border> .... </table>

2、去除所有边线


   <style>
    table,td,tr,th{
        border-style:none;
    }
    table {
        border-collapse: collapse;
    }
    </style>
赞(1) 打赏
转载请附上原文出处链接:胖蔡说技术 » 如何通过CSS实现去除table边框线?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏