table表格去掉默认样式的方法! 梦里梦外; 2022-02-19 14:43 477阅读 0赞 今天在写代码的时候发现表格具有一些默认的样式有时候并不需要,它会影响美观!可以通过以下方式去掉它。 cellpadding -- 代表单元格外面距离,用于隔单元格与单元格空间 。 cellspacing-- 代表表格边框与单元格补白距离,单元格补白间距离。 方法1:(在css样式中设置) table{ border-collapse:collapse; //表格的边框合并,如果相邻,则共用一个边框。 border-spacing:0px; //设置行与单元格边框的间距。 } 方法2:(在行内设置) <table border="0" cellspacing="0" cellpadding="0"> 下面是我的代码,大家可以更加加深了解!!!, <style type="text/css"> table{ border-collapse:collapse; border-spacing:0px; } img{ width:40px; height:40px; } </style> <body> <div> <table> <tr> <td></td> <td>商品</td> <td>单价</td> <td>数量</td> <td>操作</td> </tr> <tr> <td><img src="images/f1.jpg"></td> <td><a href="">丹穆尼通勤波点印花毛衣</a></td> <td>180.0</td> <td>2</td> <td><a href="">删除</a></td> </tr> <tr> <td><img src="images/f2.jpg"></td> <td><a href="">预售太平洋女装连衣裙</a></td> <td>765.0</td> <td>4</td> <td><a href="">删除</a></td> </tr> <tr> <td><img src="images/f3.jpg"></td> <td><a href="">丹穆尼通勤红色小外套</a></td> <td>456.0</td> <td>2</td> <td><a href="">删除</a></td> </tr> <tr> <td><img src="images/f4.jpg"></td> <td><a href="">曼巴森秋装新款套头衫</a></td> <td>140.0</td> <td>1</td> <td><a href="">删除</a></td> </tr> </table> 运行结果1:(未去掉样式) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZV9zbWFpbA_size_16_color_FFFFFF_t_70] 运行结果2:(去掉样式后) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZV9zbWFpbA_size_16_color_FFFFFF_t_70 1] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZV9zbWFpbA_size_16_color_FFFFFF_t_70]: /images/20220219/3cd1dc68ddca4b1eb98da56397d09ae0.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZV9zbWFpbA_size_16_color_FFFFFF_t_70 1]: /images/20220219/9059a7cf7c274ebbb0f6e740af710cbf.png
还没有评论,来说两句吧...