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元宵猜灯谜特效(元宵十五日猜一个字)

    在线体验:http://keleyi.com/keleyi/phtml/jqtexiao/35.htm jQuery元宵猜灯谜特效的HTML代码如下: <!DOCTYPE html> &l ...

  2. jQuery静态方法parseJSON方法使用和源码分析

    该方法接受一个JSON字符串,返回解析后的对象. 传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串: {test: 1} ( test 没有包围双引号) {'test': ...

  3. js自建方法库(持续更新)

    1.得到一个数,在一个有序数组中应该排在的位置序号: function orderInArr(num,arr) { if(num > arr[0]){ return 1 + arguments. ...

  4. html5视频播放插件

    对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...

  5. iOS 多线程GCD简介

    一.简介 1.1 GCD (Grand Central Dispatch )是Apple开发的一个多核编程的解决方法. Grand 含义是“伟大的.宏大的”,Central含义“中央的”,Dispat ...

  6. 获得appstore里面app的最新的版本信息,进行版本更新

    版本更新有两种方式 一种是从服务器获得最新的版本信息和当前app的版本进行比较 另外一种是获得appStore上最新的版本信息和当前的app的版本进行比较 现在我来说一下如何通过appStore获得最 ...

  7. iOS程序逆向Mac下常用工具——Reveal、HopperDisassemble、IDA

    原文在此 一.Reveal 1 一般使用     Reveal是ITTY BITTY发布的UI分析工具,可以很直观的查看App的UI布局.如下图所示:     Reveal是需要付费的,需要89美元, ...

  8. IOS开发之功能模块--输入框随着键盘的位置移动而移动

    废话不多说,先直接上效果图: 先熟悉一下在Cocoa框架中会用到的key键: 然后直接上Demo的源码截图: 看代码之前,补充说一句,Demo中的文本框以及文本框的背后灰色的View是通过storyb ...

  9. Lucene搜索方式大合集

    package junit; import java.io.File; import java.io.IOException; import java.text.ParseException; imp ...

  10. 基于Flume+LOG4J+Kafka的日志采集架构方案

    本文将会介绍如何使用 Flume.log4j.Kafka进行规范的日志采集. Flume 基本概念 Flume是一个完善.强大的日志采集工具,关于它的配置,在网上有很多现成的例子和资料,这里仅做简单说 ...