HTML默认的表格样式之间有间隙,每次为了解决这些问题,总要在table标签里添加cellspacing和cellpadding,你是否也很厌倦这样的写法,

那么有没有对应的CSS属性能达到相同的效果呢?

1 <table cellspacing=0 cellpadding=0>
2 </table>

答案是肯定的,cellspacing属性对应table的border-spacing CSS属性,但是cellpadding属性对应td的padding属性

1 table{
2 border-spacing:0;
3 }
4 td{
5 padding:0;
6 }

table还有很多CSS属性可以控制,比如table-layout,border-collaspse

如果你使用多个表格布局,发现由于边框使得宽度对齐出现问题,可以使用box-sizing属性,把它设置为border-box就可以了,计算盒模型的时候就会加上边框,这个属性IE8+都支持,火狐下需要使用带前缀的方式-moz-box-sizing。

快来试试吧。

使用css控制table的cellspacing和cellpadding属性的更多相关文章

  1. table表格cellspacing与cellpadding属性

    cellspacing属性 用来指定表格各单元格之间的空隙. cellpadding属性 用来指定单元格内容与单元格边界之间的空白距离的大小. 此属性的参数值也是数字,表示单元格内容与上下边界之间空白 ...

  2. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

  3. CSS控制 table 的 cellpadding,cellspacing

    CSS 常规解决办法: 表格的 cellpadding 和 cellspacing 我们经常会用如下的方式来清除默认样式: <table cellspacing="0" ce ...

  4. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  5. 用css控制table td内文字超出隐藏

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 重点是把table设置为table-layout: fixed; 超出的文字隐藏的效果才有. p标签超出的文字隐藏的效果不需要设置这个内 ...

  6. css控制table间距

    border-collapse: separate;border-spacing: 20px 30px; /* 水平间距 垂直间距 */

  7. 用css控制cellspacing、cellpadding

    用css控制cellspacing.cellpadding 发表于 2006 年 12 月 24 日 由 Silbo 在table中控制单元格之间的间距要用到cellspacing.cellpaddi ...

  8. CSS控制表格(table)样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  9. css控制两个表格的边线重合

    控制两个表格的边线重合 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. C# 中 System.Index 结构体和 Hat 运算符(^)的全新用法

    翻译自 John Demetriou 2019年2月17日 的文章 <C# 8 – Introducing Index Struct And A Brand New Usage For The ...

  2. 6.Android-五大布局

    Android 五大布局如下所示: LinearLayout 线性布局 只能指定一个方向(垂直/水平)来布局 RelativeLayout 相对布局 通过某个控件为参照物,来定位其它控件的位置的布局方 ...

  3. linux网卡驱动程序架构

    以cs89x0网卡驱动为例:

  4. 2017年 实验四 B2C模拟实验

    实验四 B2C模拟实验                [实验目的] 掌握网上购物的基本流程和B2C平台的运营 [实验条件] ⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. (3).奥派电子商 ...

  5. 多测师讲解selenium _a标签定位()_高级讲师肖sir

    shift+ctrl+c 快捷键  调出元素

  6. linux centos 02

    1.PS1变量,命令提示符的修改 PS1="[\u@\h \W]\$" \u  代表 用户 @   占位符 \h  主机名 \W   工作路径的最后一位 \t  \w   工作路径 ...

  7. Django创建表时报错django.db.utils.InternalError: (1366问题解决记录

    问题出现 执行Python manage.py makemigrations生成创建表的py文件 执行python manage.py migrate创建数据表 界面出现报错 问题原因 网上搜索原因, ...

  8. HTML <del> 标签

    HTML <del> 标签 什么是<del> 标签? 定义文档中已被删除的文本. 实例 a month  is <del>25</del> 30 day ...

  9. .Net Core 3.1.2 区域路由配置【原创】

    昨天遇到一个项目问题,新建的.NET core矿建在新建区域的MVC页面里面,无法通过路由找到页面.然后在网络上查询很多资料,发现都是千古文章一大抄,而且都是错误的. 后面又添加了3个专业技术群,同样 ...

  10. 自定义Jackson2HttpMessageConverter,适应.html后缀url

    Jackson2HttpMessageConverter 用处 SpringMVC中,controller中的方法返回java Bean对象,mvc将此对象转换成字符串 默认支持的mediaType: ...