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

最新推荐文章于 2024-04-29 19:20:19 发布

Unicorn-xueya.

最新推荐文章于 2024-04-29 19:20:19 发布

阅读量1.4w

点赞数 2

本文链接：https://blog.csdn.net/xue_smail/article/details/89339374

版权

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

在这里插入图片描述

Unicorn-xueya.

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
table表格去掉默认样式的方法！

今天在写代码的时候发现表格具有一些默认的样式有时候并不需要，它会影响美观!可以通过以下方式去掉它。cellpadding -- 代表单元格外面距离,用于隔单元格与单元格空间。cellspacing-- 代表表格边框与单元格补白距离,单元格补白间距离。方法1：（在css样式中设置）table{ border-collapse:collapse; //表格的边框合并，如果相邻，则共...
复制链接

扫一扫