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. VS2019 配置opencv4.4

    安装VS2019 参考:链接 下载opencv 链接 下载此时的最新版4.4.0 最后"上墙"下,不然很慢! 安装opencv 我的安装位置是:D:\soft\opencv\ins ...

  2. oracle 11g linux 导入中文字符乱码问题解决

    1. 涉及的字符集 这个可以分成三块,数据库服务器字符集(server).实例字符集(instance), 会话字符集(session) 2. 乱码的原因 session 的字符集和 server 的 ...

  3. Node.js安装及环境配置 for winer

    Node.js安装及环境for Windows 一.安装环境 1.本机系统:Windows 10 Pro(64位) 2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下 ...

  4. IDEA 简拼输入

    1. sout = System.out.println(); 2. soutp = System.out.println(""); 3. soutv = System.out.p ...

  5. MeteoInfoLab脚本示例:AIRS Swath HDF数据

    例子中的AIRS Swath HDF数据在Polar Stereographic(南极)投影中接近矩形,需要先从数据中读出经纬度及相关数据数组,利用surfacem函数绘制Swath数据(散点),在s ...

  6. day16 Pyhton学习

    1.range(起始位置) range(终止位置) range(起始,终止位置) range(起始,终止,步长) 2.next(迭代器) 是内置函数 __next__是迭代器的方法 g.__next_ ...

  7. centos8安装php7.4

    一,下载php7.4 1,官方网站: https://www.php.net/ 2,下载 [root@yjweb source]# wget https://www.php.net/distribut ...

  8. linux(centos8):awk在系统运维中的常用例子

    一,awk的作用 1,用途 AWK是一种处理文本文件的语言, 是一个强大的文本分析工具 2,awk和sed的区别 awk适合按列(域)操作, sed适合按行操作 awk适合对文件的读取分析, sed适 ...

  9. Ambari仓库安装教程

    Ambari仓库安装教程 如果用户需要后续使用Ambari server进行安装Hadoop则必须搭建一个内部的yum源,否则直接下载速度将会很慢,当然该服务仅要搭建一个即可,可以一直使用. 一.Ce ...

  10. linux 卸载 umount 提示device is busy

    思路:先杀掉挂载的目录(如:/usr1/)这个进程 fuser -v /usr1/ 再卸载