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. Git本地仓库push至GitHub远程仓库每次输入账户密码问题解决(亲测可行)

    在使用git push命令将本地仓库内容推送至GitHub远程仓库的每一次git都要让我们输入GitHub的用户名和密码.这着实让我们心烦.我们会有疑问,我明明设置了公钥呀!怎么还需要输入账户和密码? ...

  2. C# Note14: Editable WPF ListView

    (1)https://stackoverflow.com/questions/5652527/editable-wpf-listview (2)How to: Create a ListView wi ...

  3. hashCode和equals的关系分析

    hashCode:说白了,简单的就看做一个函数,但是该函数有可能出现:对于某个x值,存在不止一个y值与之对应.这种情况就叫哈希碰撞. 那么: 1.如果hashCode相等,两个对象不一定是同一个对象( ...

  4. redhat7通过yum安装nginx最新版

    1.准备yum源 vi /etc/yum.repo.d/nginx.repo [nginx]name=nginx repobaseurl=http://nginx.org/packages/mainl ...

  5. MySQL 大数据量分页优化

    假设有一个千万量级的表,取1到10条数据: ,; ,; 这两条语句查询时间应该在毫秒级完成: ,; 你可能没想到,这条语句执行之间在5s左右: 为什么相差这么大? 可能mysql并没有你想的那么智能, ...

  6. ES 6 系列 - Proxy

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以是一种“元编程”,即对编程语言进行编程. 简单地理解,就是在目标对象之前假设一层“拦截”,外界对改对象的访问,都必须先通过这层拦截 ...

  7. Jenkins+PowerShell持续集成环境搭建(三)Web项目

    1. 新建一个名字为HelloWorld.Web的Freesyle项目: 2. 配置源码管理: 3. 编译配置: 版本:选择MSBuild4 文件:D:\CI\Config\HelloWorld.We ...

  8. 搭建YUM仓库

    概述 YUM 主要用于自动安装.升级 rpm 软件包,它能自动查找并解决 rpm 包之间的依赖关系.要功的使用 YUM 工具安装更新软件或系统,就需要有一个包含各种 rpm 软件包的 reposito ...

  9. 利用kali破解wifi密码

    准备工具 1.笔记本 2.USB无线上网卡(必备) 3.kali系统 4.密码字典 第一种方法 暴力破解法 何为暴力破解呢,其实就是一个一个密码去试,直到正确的密码. 现在的wifi一般加密都是: 1 ...

  10. 「中国剩余定理CRT」学习笔记

    设正整数$m_1, m_2, ... , m_r$两两互素,对于同余方程组 $x ≡ a_1 \ (mod \ m_1)$ $x ≡ a_2 \ (mod \ m_2)$ $...$ $x ≡ a_r ...