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. reactNative 获取组件高、宽、位置等信息

    import {findNodeHandle, UIManager} from 'react-native' layout(ref) { const handle = findNodeHandle(r ...

  2. AlwaysInstallElevated提权

    前言:自己在学习3gstudent的AlwaysInstallElevated提权的文章中,他说过由于Metasploit的某些原因会导致权限不够,所以自己就尝试去复现其他的两种方法了,详细的文章参考 ...

  3. Navicat连接oracle,出现Only compatible with oci version 8.1

    与本地oracle连接的时候,一般没问题,sqlplus和oci都是本地oracle自带的,(设置: 工具->选项->oci) 分别为:     oci:D:\app\pcman\prod ...

  4. GoCN每日新闻(2019-10-31)

    GoCN每日新闻(2019-10-31) GoCN每日新闻(2019-10-31) 1. Go语言继承的其他语言的优秀之处 https://spf13.com/presentation/the-leg ...

  5. Expression Atlas

    网页  https://www.ebi.ac.uk/gxa/home 文档  https://www.ebi.ac.uk/gxa/help/index.html

  6. UDF——涡量

    用涡量的模来显示涡结构是一种很常用的方法 涡量: 针对二维,涡量场表示为如下的标量: 对于二维流动来说,涡量为正,表示逆时针旋转:涡量为负,表示顺时针旋转 三维涡量: 其中: 计算涡量的模: 二维涡量 ...

  7. Excel填坑[0]

    Excel填坑[0] 本着一天水一贴的原则(放p),我又来填坑了.今天做一个很简单的排队图,虽然不难,但因为手机显示问题折腾了半天.感觉做图做表格不仅仅是靠技术,更重要的是思维. 就是这张图,看起来平 ...

  8. JavaScript初探系列(八)——DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. HTML DOM 树形结构如下: 一.Node方面 (一).节点类 ...

  9. eggjs的参数校验模块egg-validate的使用和进一步定制化升级

    简单讲一下这个egg-validate egg-validate是基于parameter的. 安装 npm install --save egg-validate 启用 // config/plugi ...

  10. TensorFlow2.0初体验

    TF2.0默认为动态图,即eager模式.意味着TF能像Pytorch一样不用在session中才能输出中间参数值了,那么动态图和静态图毕竟是有区别的,tf2.0也会有写法上的变化.不过值得吐槽的是, ...