当前位置: 首页 - 编程技术 - 文章正文

table表格去掉默认样式的方法!

xiaoqihv
今天在写代码的时候发现表格具有一些默认的样式有时候并不需要,它会影响美观!可以通过以下方式去掉它。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:(未去掉样式)

运行结果2:(去掉样式后)

文章地址:https://wenmayi.cn/post/4846.html