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. mybatis一级缓存详解

    mybatis缓存分为一级缓存,二级缓存和自定义缓存.本文重点讲解一级缓存 一:前言 在介绍缓存之前,先了解下mybatis的几个核心概念: * SqlSession:代表和数据库的一次会话,向用户提 ...

  2. python学习笔记(12)--程序设计方法学

    计算思维: 逻辑思维:推演和演绎 实证思维:实验和验证,引力波->实验 计算思维:设计和构造,计算机为代表,汉诺塔递归. 计算思维特征 抽象和自动化,抽象问题的计算过程,利用计算机自动化求解. ...

  3. 跨站请求伪造和cookie伪造

    CSRF(Cross-site request forgery跨站请求伪造,也被称成为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站 ...

  4. qtp 自动货测试桌面程序-笔记(使用参数 parameters)

    dtGlobalSheet:运行整个test时候使用的参数(心得:可以将公共使用的测试数据放于全局表格中,所有action脚本都可以使用同一个数据,如供应商.客户.商品) dtActionSheet: ...

  5. Maven问题:Failure to transfer org.apache.maven

    Maven报错:Failure to transfer org.apache.maven 在创建Maven项目时,经常会在pom.xml的第一行处报错,提示信息如下: Failure to trans ...

  6. Android组件化、模块化、插件化

    组件:指的是单一的功能组件,如地图组件(MapSDK).扫码组件(QRCode).支付组件(AnjukePay).路由组件(Router)等等: 模块:指的是独立的业务模块,如新房模块(NewHous ...

  7. load加载层-layui

    加载样式 //eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = laye ...

  8. P1200 你的飞碟在这儿

    P1200 题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支持者. 因此,他们要用一种聪明的方案让这些小组提前知道 ...

  9. P1567 气温统计

    P1567 题目描述 炎热的夏日,KC 非常的不爽.他宁可忍受北极的寒冷,也不愿忍受厦门的夏天.最近,他开始研究天气的变化.他希望用研究的结果预测未来的天气. 经历千辛万苦,他收集了连续 N(1≤N≤ ...

  10. centos 7创建ss服务(方式二)

    一:安装pip yum install python-pip 如果没有python包则执行命令:yum -y install epel-release: 二:安装SS pip install shad ...