当Table中td内容为空时,显示边框的办法
1. 在 table的css里面加: border-collapse:collapse;
在 td 的css里面加: empty-cells:show;
2 .最简单的就是 在TD里写个
说明:
border-collapse设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
定义和用法
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
默认值: | separate |
---|---|
继承性: | yes |
版本: | CSS2 |
JavaScript 语法: | object.style.borderCollapse="collapse" |
浏览器支持
所有主流浏览器都支持 border-collapse 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
注释:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。
可能的值
值 | 描述 |
---|---|
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
empty-cells:
定义和用法
empty-cells 属性设置是否显示表格中的空单元格(仅用于“分离边框”模式)。
注释:某些版本的 IE 浏览器不支持此属性。
说明
该属性定义了不包含任何内容的表单元格如何表示。如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性。
默认值: | show |
---|---|
继承性: | yes |
版本: | CSS2 |
JavaScript 语法: | object.style.emptyCells="hide" |
浏览器支持
所有浏览器都支持 empty-cells 属性。
注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 empty-cells 属性。
可能的值
值 | 描述 |
---|---|
hide | 不在空单元格周围绘制边框。 |
show | 在空单元格周围绘制边框。默认。 |
inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
相关页面
当Table中td内容为空时,显示边框的办法的更多相关文章
- 当Table中td内容为空时,让它显示边框的办法
1 在 table的css里面加 border-collapse:collapse; 在 td 的css里面加 empty-cells:show; border-collapse设置或检索表 ...
- table中td内容过长 省略号显示
首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...
- table中td 内容超长 自动折行 (含字母数字文字)
<table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...
- table中td内容过长自动换行
table { table-layout:fixed; WORD-BREAK:break-all;}
- 如何让table中td宽度固定
table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...
- 怎样推断DIV中的内容为空
怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...
- 如何让table中td与四周有间距
如何让table中td与四周有间距 方法一 在td下再添加一个会计元素 <tr> <td>第2节</td> <td>语文</td> < ...
- C# 去除Split()中去除内容为空的数据
C#去除Split()中去除内容为空的数据 var str="0001,0002,"; var strusers1 = str.Split(','); ///结果["0 ...
- vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案
vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...
随机推荐
- Java设计模式之单例模式
很多人都疑惑,单例模式是什么?为什么要用单例模式?在这里,笔者记录的仅仅只是自己对于知识点的理解,如果有错误的,请下方评论指教,共同进步,谢谢. 单例模式是什么? 简单理解: 单例就是一个实例被多个用 ...
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- ORACLE 物理读 逻辑读 一致性读 当前模式读总结浅析
在ORACLE数据库中有物理读(Physical Reads).逻辑读(Logical Reads).一致性读(Consistant Get).当前模式读(DB Block Gets)等诸多概念,如果 ...
- SLF4j:Log facade abstract
内 容: 应用中使用slf4j的工作流程 简单示例 ILoggerFactory实例化过程 由ILoggerFactory创建Logger实例 slf4j 适配器实现 自定义适配器 slf4j 如何选 ...
- MySQL慢查询Explain Plan分析
Explain Plan 执行计划,包含了一个SELECT(后续版本支持UPDATE等语句)的执行 主要字段 id 编号,从1开始,执行的时候从大到小,相同编号从上到下依次执行. Select_typ ...
- 多点触摸(MT)协议(翻译)
参考: http://www.kernel.org/doc/Documentation/input/multi-touch-protocol.txt 转自:http://www.arm9home.ne ...
- linux中5条查找命令
1 which which命令的作用是,在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果. which [文件...] 参 数: -n<文件名长度> 指定文件名长 ...
- Si2151/41 6th Generation Silicon TV Tuner ICs
The Si2151/41 are the industry's most advanced silicon TV tuner ICs supporting all worldwide terre ...
- 【WPF系列】基础学习-WPF架构概览
引言 WPF从.net framewok3.0加入以来,经历了很多跟新.每次更新都给用户带来了新的功能或者优化性能.下面我们首先看下WPF再.netFramework中的位置,接着介绍下WPF的架构框 ...