table表格去掉默认样式的方法！代码

今天在写代码的时候发现表格具有一些默认的样式有时候并不需要，它会影响美观!可以通过以下方式去掉它。
cellpadding – 代表单元格外面距离,用于隔单元格与单元格空间。
cellspacing-- 代表表格边框与单元格补白距离,单元格补白间距离。
方法1：（在css样式中设置）

table{
  border-collapse:collapse;  //表格的边框合并，如果相邻，则共用一个边框。
  border-spacing:0px;  	     //设置行与单元格边框的间距。
 }

方法2：(在行内设置)

<table border="0" cellspacing="0" cellpadding="0">
1
下面是我的代码，大家可以更加加深了解！！！,

<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：（去掉样式后）

昊哥的HelloWorld

发布了23 篇原创文章 · 获赞 1 · 访问量 328

私信关注

table表格去掉默认样式的方法！代码

猜你喜欢