之前博文：HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的，div是切了三条，顶部的图片，下部的图片，中间的平铺条，中间的div不设高度，根据内容，该区域的大小不固定，便于后期增删内容不用再改样式。

前面的博文用div平铺的，此外，用table也能实现这个效果，table需要注意要把td的padding清零，否则td单元格里上下有padding，会出现裂缝。图片高度是按照单元格高度裁剪的，所以主要是上下padding引起的。
如图，第一个table排版中td里没有设置padding是0，在浏览器开发者模式里可以看到有padding存在。
第二个table排版中td里都设置了padding是0，所以没有裂缝。

图片都是根据单元格大小裁剪的，图片尺寸和单元格大小一致。
如图，第一个table里出现了裂纹，底部的图还出现了一条线，原因就是由于padding的存在导致单元格本身高度高于图片切片裁剪的高度。
第一个td，剩下的区域显示了一条白色线，裂纹状（顶图上边有白色区域）
第二个td由于是平铺，把多出来的pddding铺上了。
第三个td由于是底图，底图的最上方不是白色区域，是颜色，多出来的部分被铺上了顶面的图片。（底图上有颜色，所以平铺处理底图顶部的颜色）

测试代码：

<body>

<h5>存在padding，有裂缝和问题的：</h5>

<div id="t2">

<table width="900px" border=0 style="border-collapse:collapse;">

<tr>

    <td width="900px" height="165px" style="background-image:url(./images/top.png);"></td>

</tr>

<tr>

    <td width="900px" style="background-image:url(./images/mid.png);padding-left:50px;padding-right:50px;">官网样例是混合部署LodopFuncs.js里已经写好了判断。<br>

客户端是浏览器支持np插件，是32位浏览器，就会提示下载32位的Lodop插件：install_lodop32.exe<br>

客户端浏览器支持np插件，是64位浏览器，就会提示下载64位的Lodop插件：install_lodop64.exe<br>

客户端浏览器不支持np插件（判断如高版本谷歌火狐等），会提示下载C-Lodop方式： CLodop_Setup_for_Win32NT.exe</td>

</tr>

<tr>

    <td width="900px" height="75px" style="background-image:url(./images/bottom.png);"></td>

</tr>

</table>

</div>

<h5>清除padding，正常的：</h5>

<div id="t1">

<table width="900px" border=0 style="border-collapse:collapse;">

<tr>

    <td width="900px" height="165px" style="background-image:url(./images/top.png);padding:0px;"></td>

</tr>

<tr>

    <td width="900px" style="background-image:url(./images/mid.png);padding:0px;padding-left:50px;padding-right:50px;">官网样例是混合部署LodopFuncs.js里已经写好了判断。<br>

客户端是浏览器支持np插件，是32位浏览器，就会提示下载32位的Lodop插件：install_lodop32.exe<br>

客户端浏览器支持np插件，是64位浏览器，就会提示下载64位的Lodop插件：install_lodop64.exe<br>

客户端浏览器不支持np插件（判断如高版本谷歌火狐等），会提示下载C-Lodop方式： CLodop_Setup_for_Win32NT.exe</td>

</tr>

<tr>

    <td width="900px" height="75px" style="background-image:url(./images/bottom.png);padding:0px;"></td>

</tr>

</table>

</div>

</body>

图示：

单元格大小和图片大小是一致的，但是平铺的时候高度超出了一点，导致上图和下图出现问题。
经过浏览器自带的开发者模式查看到，原来是td有默认的padding，清除后就好了。
也可以算上padding的大小对图片进行裁剪，但是那样不如td和图片一致比较好。

HTML用table布局排版 padding清零的更多相关文章

  1. HTML布局排版之制作个人网站的文章列表

    文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...

  2. css样式清零及常用类

    css样式清零及常用类 @charset "utf-8"; /*CSS Reset*/ /*"微软雅黑","\5FAE\8F6F\96C5\9ED1& ...

  3. HTML布局排版1清除body的margin

    观察可发现,一般的HTML页面分为上中下三部分,上边是导航一栏,中间是内容,下方是页面的下部分.注意html里body本身自带8px的上下左右外边距,如图,在qq浏览器和ie里可以看到body本身是8 ...

  4. 日历控件table布局

    作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...

  5. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

  6. SQL Identity自增列清零方法

    1.使用DBCC控制台命令: dbcc checkident(表名,RESEED,0) 2.truncate table 也可将当前标识值清零 但当有外键等约束时,无法truncate表 可以先禁用外 ...

  7. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  8. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

  9. display:table布局总结

    1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. neo4j索引

    1.创建索引 CREATE INDEX ON : Disease (name) 2.查询所有创建的索引 :schema 或者 call db.indexes 3.删除索引 drop index on ...

  2. b/s实现大文件上传分片上传断点续传

    关键部分 前端用file.slice()分块 前端用FileReader获取每一分块的md5值 后端用MultipartFile接受分块文件 后端用FileOutputStream拼装分块文件 话不多 ...

  3. C int类型的数组在内存中的地址示例

    #include <stdio.h> int main(void){ int age[5] = {5,6,7,20,99}; return 0; } //转换后 /*(gdb) p &am ...

  4. 交互设计算法基础（2） - Selection Sort

    int[] selection_sort(int[] arr) { int i, j, min, temp, len=arr.length; for (i=0; i<len-1; i++) { ...

  5. 《挑战30天C++入门极限》对C++递增(增量)运算符重载的思考

        对C++递增(增量)运算符重载的思考 在前面的章节中我们已经接触过递增运算符的重载,那时候我们并没有区分前递增与后递增的差别,在通常情况下我们是分别不出++a与a++的差别的,但的确他们直接是 ...

  6. php 每隔30s在页面显示字符串

    例子 // 30秒执行一次 ignore_user_abort(); //即使Client断开(如关掉浏览器),PHP脚本也可以继续执行. set_time_limit(); // 执行时间为无限制, ...

  7. TCP采用四次挥手关闭连接如图所示为什么建立连接协议是三次握手，而关闭连接却是四次握手呢？

    tcp四次挥手,由于TCP连接是全双工的,因此每个方向都必须单独进行关闭. 由于TCP连接是全双工的,因此每个方向都必须单独进行关闭.这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个 ...

  8. struts的带参数结果集

    action在forward过程中共享一个值栈,也就是一次request只有一个值栈,服务器端的forward对于客户端来说就是一次request,在forward过程就没必要再传参数了. 总结也就是 ...

  9. 2018-2019-2 网络对抗技术 20165212 Exp6 信息搜集与漏洞扫描

    2018-2019-2 网络对抗技术 20165212 Exp6 信息搜集与漏洞扫描 原理与实践说明 1.实践原理 信息搜集:渗透测试中首先要做的重要事项之一,搜集关于目标机器的一切信息 间接收集 D ...

  10. iframe的src指向的内容不刷新

    想任何一种办法让iframe的src的值有变化就可以了 $("#h5Content").attr("src","${h5.url}"+&qu ...