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. BUUCTF-[极客大挑战 2019]BabySQL 1 详解

    打开靶机 应该是love sql惹的事吧,来了个加强版本的sql注入,不过我们先输入账号密码看有什么反应 整一手万能密码,闭合双引号?username=admin&password=admin ...

  2. mongoose 查询数据属性为数组,且包含某个值的方法

    mongoose在创建schema的时候有些属性需要设置为数组类型,比如商品图片.商品标签.不同尺寸.价格等. 那么怎么查询具有某个标签的商品了,下面记录一下两种情况: 查询具有'vue'标签的文章 ...

  3. Python+Appium自动化测试(12)-通过坐标定位元素

    在使用appium做app自动化测试的过程中,可能会遇到元素的属性值不是唯一的情况,导致不能通过find_element_bi_xx()方法定位元素,这个时候我们就可以通过坐标来定位元素. 1,通过绝 ...

  4. 从Linux源码看Socket(TCP)的bind

    从Linux源码看Socket(TCP)的bind 前言 笔者一直觉得如果能知道从应用到框架再到操作系统的每一处代码,是一件Exciting的事情. 今天笔者就来从Linux源码的角度看下Server ...

  5. Python--网络爬虫模块requests模块之响应--response

    当requests发送请求成功后,requests就会得到返回值,如果服务器响应正常,就会接收到响应数据: Response响应中的属性和方法 常用属性: status_code: 数据类型:int ...

  6. canal 整合RabbitMQ

    环境如下: canal: 1.15-alpha-1 mysql  5.6.49 rabbitmq 3.7.14 Erlang 21.3 canal 安装和启动 见上篇文章 canal快速安装启动 但是 ...

  7. spring boot:使mybatis访问多个druid数据源(spring boot 2.3.2)

    一,为什么要使用多个数据源? 1,什么情况下需要使用多个数据源? 当我们需要访问不同的数据库时,则需要配置配置多个数据源, 例如:电商的业务数据库(包括用户/商品/订单等)            和统 ...

  8. spring boot:使用redis cluster集群作为分布式session(redis 6.0.5/spring boot 2.3.1)

    一,为什么要使用分布式session? HpptSession默认使用内存来管理Session,如果将应用横向扩展将会出现Session共享问题, 所以我们在创建web集群时,把session保存到r ...

  9. css和js实现硬件加速渲染自定义滚动条

    听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...

  10. Vue留言 checked框案列

    在命令行窗口输入vue create "工程名"命令 来创建vue脚手架