table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的border,边框设置一定数值,边框为白色,这样白色的边框分隔了table的单元格,效果就类似设置了单元格间距
例如该文,border-collapse:collapse和border:10px solid white,设置单元格间距是10px。
测试代码:

  <style>
table td{width:50px;height:50px;background:blue;}
#d2 table{border-collapse:collapse;}
#d2 table td{border:10px solid white;}
</style>
<div id="d1">
<table cellspacing=10>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div> <div id="d2">
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>

图示:

设置table表格的单元格间距两种方式的更多相关文章

  1. Swift - 设置网格UICollectionView的单元格间距

    要设置单元格cell的间距(水平间距,垂直间距)可进行如下设置: 方法1:在storyboard中设置 选择Collection View后在面板里设置Min Spacing相关属性(这里也可以设置单 ...

  2. JS获取table表格任意单元格值

    jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...

  3. display:table表格合并单元格

    直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  4. 设置Linux之CentOS7的网络的两种方式动态IP+静态IP

    1 动态IP 参考之前的文章 点击进入 2 静态IP vi /etc/sysconfig/network-scripts/ifcfg-ens33 详情配置如下,上面半部分是我之前的动态IP的设置 静态 ...

  5. itextpdf中表格中单元格的文字水平垂直居中的设置

    在使用itextpdf中,版本是5.5.6,使用Doucument方式生成pdf时,设置单元格中字体的对齐方式时,发现一些问题,并逐渐找到了解决方式. 给我的经验就是:看官网的例子才能保证代码的效果, ...

  6. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  7. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  8. 使用POI创建word表格合并单元格兼容wps

    poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. spring Boot + MyBatis + Maven 项目,日志开启打印 sql

    在 spring Boot + MyBatis + Maven 项目中,日志开启打印 sql 的最简单方法,就是在文件 application.properties 中新增: logging.leve ...

  2. MVC 自己创建URL 对象处理路径

    var url = new UrlHelper(filterContext.RequestContext); var url = new UrlHelper(HttpContext.Current.R ...

  3. springboot集成mail实现邮件服务

    1,新建mailconfig类,对邮件服务固定配置进行实体封装: import java.util.Properties; import org.springframework.beans.facto ...

  4. clr调试扩展和DAC

    SOS.DLL.SOSEX.DLL这两个就是用来对.NET程序在Windows调试工具中起到翻译作用的调试器扩展.简单讲就是,这两个组件是.NET项目组专门开发出来用来对.NET应用程序进行方便调试用 ...

  5. 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)

    https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...

  6. 60: noi.ac #69

    $code$ #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring&g ...

  7. 洛谷 P5408 【模板】第一类斯特林数·行

    传送门 首先,有 \[ x^{\overline n}=\sum_k\begin{bmatrix}{n\\ k}\end{bmatrix}x^{k}\\ \] 那么我们只需要求出\(x^{\overl ...

  8. nginx 访问控制之 request_uri

    $request_uri比$docuemnt_uri多了请求的参数. 主要用来针对请求的uri中的参数进行控制. 示例: if ($request_uri ~ "gid=\d{9,12}&q ...

  9. Net core学习系列(八)——Net Core日志

    一.简介# 日志组件,作为程序员使用频率最高的组件,给程序员开发调试程序提供了必要的信息.ASP.NET Core中内置了一个通用日志接口ILogger,并实现了多种内置的日志提供器,例如 Conso ...

  10. ASP.NET Core 的 Dependency Injection

    ASP.NET Core使用了大量的DI(Dependency Injection)设计,有用过Autofac或类似的DI Framework对此应该不陌生.本篇将介绍ASP.NET Core的依赖注 ...