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"

实例

为表格设置合并边框模型:

table
{
border-collapse:collapse;
}

TIY

浏览器支持

所有主流浏览器都支持 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"

实例

隐藏表格中空单元格上的边框和背景:

table
{
border-collapse:separate;
empty-cells:hide;
}

亲自试一试

浏览器支持

所有浏览器都支持 empty-cells 属性。

注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 empty-cells 属性。

可能的值

描述
hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。
inherit 规定应该从父元素继承 empty-cells 属性的值。

相关页面

当Table中td内容为空时,显示边框的办法的更多相关文章

  1. 当Table中td内容为空时,让它显示边框的办法

    1 在 table的css里面加 border-collapse:collapse; 在 td 的css里面加      empty-cells:show; border-collapse设置或检索表 ...

  2. table中td内容过长 省略号显示

    首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...

  3. table中td 内容超长 自动折行 (含字母数字文字)

    <table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...

  4. table中td内容过长自动换行

    table { table-layout:fixed; WORD-BREAK:break-all;}

  5. 如何让table中td宽度固定

    table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...

  6. 怎样推断DIV中的内容为空

    怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...

  7. 如何让table中td与四周有间距

    如何让table中td与四周有间距 方法一 在td下再添加一个会计元素 <tr> <td>第2节</td> <td>语文</td> < ...

  8. C# 去除Split()中去除内容为空的数据

    C#去除Split()中去除内容为空的数据 var  str="0001,0002,"; var strusers1 = str.Split(','); ///结果["0 ...

  9. vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案

    vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...

随机推荐

  1. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  2. js正则表达式图形化工具-rline

    github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...

  3. 独立IP 与 共享IP

    最近在阿里云产品体系中折腾的不亦乐乎,在选则服务器的时候,会有独立IP和共享IP的两种不同的选择,这里查阅资料予以记录,独立IP与共享IP的区别: 因为IP资源有限,独立IP就是说一个IP地址只给你一 ...

  4. 事务隔离级别(IsolationLevel)

    事务的特性(ACID)1.原子性(Atomicity) 事物是数据库的逻辑工作单位,事务中的诸多操作要么全做要么全不做2.一致性(Consistency) 事务执行结果必须是使数据库从一个一致性状态变 ...

  5. css相对定位和绝对定位

    相对定位,是对原来元素的位置为参照物进行定位: 绝对定位,如果父级没有定位,则针对HTML为参照物进行定位:如果父级有定位,则针对父元素为参照物进行定位

  6. Mockito Hello World

    Mockito Hello World 项目配置 IDE是Intellij IDEA,用gradle配置项目. 新建一个Java项目,gradle中需要有这个:   repositories { jc ...

  7. Golang(笔记) 面向对象

    package main import ( "fmt" ) //对象定义 type Rect struct{ x,y float64 width ,height float64 } ...

  8. 了解HTML 盒模型

    HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对 ...

  9. 基于Ruby的watir-webdriver自动化测试方案与实施(五)

    接着基于Ruby的watir-webdriver自动化测试方案与实施(四) http://www.cnblogs.com/Javame/p/4164570.html 继续 ... ... 关于特殊控件 ...

  10. #研发解决方案介绍#基于StatsD+Graphite的智能监控解决方案

    郑昀 基于李丹和刘奎的文档 创建于2014/12/5 关键词:监控.dashboard.PHP.graphite.statsd.whisper.carbon.grafana.influxdb.Pyth ...