在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.
1.初始:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
效果:
2. 通过css实现: cellspacing = 0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
border-collapse: collapse; 是针对 <table>元素的.
效果:
3. css实现 cellspacing = xx;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: separate;
border-spacing: 20px;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
10 border-collapse: separate;
11 border-spacing: 20px; 1-- border-spacing 只有在 border-collapse : separate 时 才会起作用.
2-- border-collapse, border-spacing 都是 针对 <table>元素的.
4. css实现 cellpadding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; }
td {
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
1-- border-collapse 是针对 <table>元素的. padding 是针对 td 元素的.
-----------------------------------------------------------------------------------------------------
5. tr, th 有border . 没有 padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; }
tr {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
效果:
参考链接:
CSS中cellspacing和cellpadding属性用法揭秘
在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.的更多相关文章
- html5中不再支持的元素
html5中不再支持的元素:1.acronym(建议abbr) : 定义首字母缩写2.applet(建议object): 定义 applet3.basefont(使用css控制)4.big(使用css ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- html5中audio支持音频格式
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
- IE9对HTML5中一部分属性不提供支持的原因
为什么在IE9中对于HTML5标准中的离线应用程序以及CSS3中的一部分不提供支持?笔者间接了解到了这个原因. 微软日前已经发布了Internet Explorer 9(以下简称IE9)正式版.在该版 ...
- HTML5中已经不支持元素汇总，持续更新
HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object): 定义 applet 3.bas ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- dcoker 安装mysql和数据持久化
# mysql 镜像下载 docker pull mysql ( 版本自己选择) # run 服务 docker run --name mysql.5.5 -p 3306:3306 -e MYSQ ...
- 网络基础之 并发编程之进程,多路复用,multiprocess模块
并发 1. 背景知识 2. 什么是进程 3. 进程调度 4. 并发与并行 5 同步\异步\阻塞\非阻塞(重点) 6.multiprocess模块 7.僵尸进程与孤儿进程 1.背景知识 一操作系统的作用 ...
- 【PowerDesigner】【9】禁止Name与Code同步
问题:修改了某个字段的name,其code也跟着修改 步骤:Tools→General Options..→Dialog→取消勾选“Name to Code mirroring”复选框 参考博客: 1 ...
- input事件在ie9以下不兼容问题完美解决
上周四好不容易加了几天班把刚接手的一个pc页面做完,周五同事说要兼容ie7~ie9,结果在上面一跑,输入都没法输入. 我的需求是用6个span作为虚拟的密码输入框,实际上是用一个藏在页面里的input ...
- WDA基础十三：常用模板管理
常用的模板一般是SMW0和OAOR,根据不同需求来的. WAD有个不好的地方就是不支持GUI上的OLE和DOI,所以需要做转换,下面是常用的方式: FUNCTION ZCRM_DOWNLOAD_TEM ...
- 用swoole简单实现MySQL连接池
MySQL连接池 在传统的网站开发中,比如LNMP模式,由Nginx的master进程接收请求然后分给多个worker进程,每个worker进程再链接php-fpm的master进程,php-fpm再 ...
- Hibernate 加载策略得总结
Hibernate 加载策略得总结 加载策略(优化查询): 策略种类: 延迟加载: 等到使用的时候才会加载数据. 立即加载: 不管使用不使用,都会立刻将数据加载. 策略的应用: 类级别的加载策略. 关 ...
- K-Means ++ 和 kmeans 区别
Kmeans算法的缺陷 聚类中心的个数K 需要事先给定,但在实际中这个 K 值的选定是非常难以估计的,很多时候,事先并不知道给定的数据集应该分成多少个类别才最合适Kmeans需要人为地确定初始聚类中心 ...
- Qt调用JS（二）
转自:http://www.cnblogs.com/verstin/p/4908673.html <html> <script language="JavaScript&q ...
- Nop 4.1版本已经迁移到.net core2.1版本
1. github 下载,4.1版本,运行, install时,会让你新增后台账户密码,sql服务器 2. 在Configuration 新增Language 3. 上传中文语言包 , 你也可以先导出 ...