css:

        .test1 {
empty-cells: show;/*show:指定当表格的单元格无内容时,显示该单元格的边框。*/
border-spacing: 10px 10px;/*用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值*/
border-collapse: separate;/*separate:边框独立;collapse:相邻边被合并*/
table-layout: fixed;/*fixed:固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切*/
width: 100%;
} .test2 {
empty-cells: hide;/*hide:指定当表格的单元格无内容时,隐藏该单元格的边框。*/
border-spacing: 10px 10px;
border-collapse: separate;
table-layout: fixed;
width: 100%;
} td {
background-color: aliceblue;
text-align: center;
border: 1px solid #3198F7;
border-radius: 5px;
height: 50px;
}

html:

      <h1>show:</h1>
<table class="test1">
<tbody>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>Joy</td>
<td>26</td>
</tr>
<tr>
<td>2</td>
<td>Kate</td>
<td></td>
</tr>
</tbody>
</table> <h1>hide:</h1>
<table class="test2">
<tbody>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>Joy</td>
<td>26</td>
</tr>
<tr>
<td>2</td>
<td>Kate</td>
<td></td>
</tr>
</tbody>
</table>

效果:

用table绘制 等宽等间距的单元的更多相关文章

  1. table列等宽

    固定table列等宽 固定table列等宽 style: {table-layout : fixed} html: style="table-layout:fixed" js: o ...

  2. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  3. table中怎么设置两行间距

    table中设置两行间距方法: css代码实现 <style> table   {   border-collapse:   separate;   border-spacing:   1 ...

  4. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  5. as画柱型图的简单算法(关于柱型图宽和间距问题)

    做统计数据,经常用到如下柱型图: 柱图的X轴宽度(W)是已知的,在不影响柱的美观度情况下,怎么确定柱的宽度(w1)和柱间距(p1)的具体数值或比例呢? 在X轴宽度(W)已确定,柱的个数(A)是个不定值 ...

  6. 关于bootstrap table 固定列宽

    首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height= ...

  7. display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  8. ios -使用NSLayoutConstraint实现多个view等宽等高等间距

    @interface ViewController () { UIView *firstView; UIView *secondView; UIView *thirdView; } @end @imp ...

  9. table问题汇总

    平时要使用 table 的次数说多不多,说少不少,但每次使用必定会被几个问题"坑"一下,所以这篇博客用来记录下table那些"小坑".但 table 也会有很多 ...

随机推荐

  1. day 7-16 单表查询

    一.准备工作 先把表建立好,方便一会查询. create table emp( id int not null unique auto_increment, name varchar(20) not ...

  2. Object.prototype.toString.call()

    源码中有这样一段: class2type = {}, toString = class2type.toString,   function type(obj) { //obj为null或者undefi ...

  3. mysql定时任务event——清理过期数据

    需要删除数据的表名:t_req_log 建表sql CREATE TABLE `t_req_log` ( `id` ) NOT NULL AUTO_INCREMENT, `host` ) DEFAUL ...

  4. StringBuilder与String有哪些区别?

    System.String具备不可修改性,在程序中这样的特性容易产生性能上的问题.针对这个问题.NET提供的StringBuilder类可以解决类似的问题. String 和 StringBuilde ...

  5. String、StringBuffer、StringBuilder三种类型的一点比较

    简要记一点 以运行速度来说: StringBuilder>StringBuffer>String 以线程安全来说: StringBuilder线程不安全,而StringBuffer线程安全 ...

  6. Java的hashCode和equals方法

    当然健壮的代码,两个都重写那是最好. 用不到hashCode的, 也没有必要重写hashCode. 个人感觉. 哈希机制的Java集合类,例如 Hashtable, HashMap, HashSet ...

  7. 如何快速定位到DBGrid的某一行!!!急...

    比如我查找张三,那么DBGrid就可以定位到张三那行并选中这行,除了用循环实现还有没有快速定位的方法,谢谢! 解决方案 » to SuperTitan001 那如何找到张三的这行呢?除了用循环还有什么 ...

  8. css3实现背景渐变

    #grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 ...

  9. 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

    使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

  10. Nginx 对上游使用SSL链接

    L96 双向认证SSL指令示列 对下游使用证书指令 Syntax: ssl_certificate file; Default: — Context: http, server Syntax: ssl ...