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. BJOI2018 day2

    双人猜数游戏 Alice 和 Bob 是一对非常聪明的人,他们可以算出各种各样游戏的最优策略.现在有个综艺节目<最强大佬>请他们来玩一个游戏.主持人写了三个正整数 \(s\) .\(m\) ...

  2. Tomcat热部署和热加载

    1.热部署与热加载 在应用运行的时候升级软件,无需重新启动的方式有两种,热部署和热加载.它们之间的区别是: (1).部署方式: 热部署在服务器运行时重新部署项目.热加载在运行时重新加载class. ( ...

  3. combineReducers(reducers)

    combineReducers(reducers) 随着应用变得越来越复杂,可以考虑将 reducer 函数 拆分成多个单独的函数,拆分后的每个函数负责独立管理 state 的一部分. combine ...

  4. O2O项目之一 环境搭配

    技术栈:vue全家桶(使用nuxtjs:https://zh.nuxtjs.org/guide/installation  ) + ssr + redis + mongodb + wabpack + ...

  5. Python列表生成式练习

    ''' 如果list中既包含字符串,又包含整数,由于非字符串类型没有lower()方法,所以列表生成式会报错 使用内建的isinstance函数可以判断一个变量是不是字符串: 返回True 或 Fal ...

  6. 常用方法 Excel转换为DataSet

    注意一下Excel格式,我平时导入的是xlsx /// <summary> /// Excel 转换为 DataSet /// </summary> /// <param ...

  7. 请找出"aaaabbcccdddd"字符串中出现最多的字母

    function getCount(str) { for(var code=32;code<128;code++){ var mych=String.fromCharCode(code); va ...

  8. shell 小数比较大小

    a=1.6b=6.1c=`echo "$a > $b" | bc`然後,如果 $c 是 1 ,那就成立,否則不成立. 参考: http://ju.outofmemory.cn ...

  9. template cannot be keyed. Place the key on real elements instead.

    template cannot be keyed. Place the key on real elements instead. 一.总结 一句话总结: 原因:vue不支持在 template 元素 ...

  10. SpringMVC(十六):如何使用编程方式替代/WEB-INF/web.xml中的配置信息

    在构建springmvc+mybatis项目时,更常用的方式是采用web.xml来配置,而且一般情况下会在web.xml中使用ContextLoaderListener加载applicationCon ...