设置table表格的单元格间距两种方式
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表格的单元格间距两种方式的更多相关文章
- Swift - 设置网格UICollectionView的单元格间距
要设置单元格cell的间距(水平间距,垂直间距)可进行如下设置: 方法1:在storyboard中设置 选择Collection View后在面板里设置Min Spacing相关属性(这里也可以设置单 ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- display:table表格合并单元格
直接上代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- 设置Linux之CentOS7的网络的两种方式动态IP+静态IP
1 动态IP 参考之前的文章 点击进入 2 静态IP vi /etc/sysconfig/network-scripts/ifcfg-ens33 详情配置如下,上面半部分是我之前的动态IP的设置 静态 ...
- itextpdf中表格中单元格的文字水平垂直居中的设置
在使用itextpdf中,版本是5.5.6,使用Doucument方式生成pdf时,设置单元格中字体的对齐方式时,发现一些问题,并逐渐找到了解决方式. 给我的经验就是:看官网的例子才能保证代码的效果, ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- 使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- reactNative 获取组件高、宽、位置等信息
import {findNodeHandle, UIManager} from 'react-native' layout(ref) { const handle = findNodeHandle(r ...
- AlwaysInstallElevated提权
前言:自己在学习3gstudent的AlwaysInstallElevated提权的文章中,他说过由于Metasploit的某些原因会导致权限不够,所以自己就尝试去复现其他的两种方法了,详细的文章参考 ...
- Navicat连接oracle,出现Only compatible with oci version 8.1
与本地oracle连接的时候,一般没问题,sqlplus和oci都是本地oracle自带的,(设置: 工具->选项->oci) 分别为: oci:D:\app\pcman\prod ...
- GoCN每日新闻(2019-10-31)
GoCN每日新闻(2019-10-31) GoCN每日新闻(2019-10-31) 1. Go语言继承的其他语言的优秀之处 https://spf13.com/presentation/the-leg ...
- Expression Atlas
网页 https://www.ebi.ac.uk/gxa/home 文档 https://www.ebi.ac.uk/gxa/help/index.html
- UDF——涡量
用涡量的模来显示涡结构是一种很常用的方法 涡量: 针对二维,涡量场表示为如下的标量: 对于二维流动来说,涡量为正,表示逆时针旋转:涡量为负,表示顺时针旋转 三维涡量: 其中: 计算涡量的模: 二维涡量 ...
- Excel填坑[0]
Excel填坑[0] 本着一天水一贴的原则(放p),我又来填坑了.今天做一个很简单的排队图,虽然不难,但因为手机显示问题折腾了半天.感觉做图做表格不仅仅是靠技术,更重要的是思维. 就是这张图,看起来平 ...
- JavaScript初探系列(八)——DOM
DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. HTML DOM 树形结构如下: 一.Node方面 (一).节点类 ...
- eggjs的参数校验模块egg-validate的使用和进一步定制化升级
简单讲一下这个egg-validate egg-validate是基于parameter的. 安装 npm install --save egg-validate 启用 // config/plugi ...
- TensorFlow2.0初体验
TF2.0默认为动态图,即eager模式.意味着TF能像Pytorch一样不用在session中才能输出中间参数值了,那么动态图和静态图毕竟是有区别的,tf2.0也会有写法上的变化.不过值得吐槽的是, ...