1）实现任意一行下边框的颜色设置：

  • 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
  • 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

实现的效果为：

html代码：

<!DOCTYPE html>

<html>

<head lang="zh">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta charset="utf-8" />

    <title>商品管理后台首页</title>

    <link rel="stylesheet" href="./css/index.css" />

</head>

<body>

    <table cellpadding="5px" cellspacing="0">

        <tr>

            <th>1</th><th>2</th><th>3</th>

        </tr>

        <tr class="first-row">

            <td>ws</td><td>ws</td><td>ws</td>

        </tr>

        <tr>

            <td>ws</td><td>ws</td><td>ws</td>

        </tr>

    </table>

</body>

</html>

对应的less为：

table{

    th{

        border-bottom: 1px solid grey;

    }

    .first-row{    /*设置该tr中td的边框颜色，要注意的是在html中设置cellspacing="0"*/

        td{

        border-bottom: 1px solid red;

        }

    }

}

由于cellspacing设置的是td与td之间的距离，如果将cellspacing=10px;cellpadding=0px；则效果为：

2）当给<tr>标签设置为display:block;时，可以设置<tr>的高度和宽度以及边框，以及上下边距。且此时每行的<td>可以设置不同的百分比宽度，如

<table cellpadding="0px" cellspacing="0px">

        <tr>

            <th width="20%">1</th><th width="40%">2</th><th width="60%">3</th>

        </tr>

        <tr class="first-row">

            <td width="20%">ws</td><td width="60%">ws</td><td width="20%">ws</td>

        </tr>

        <tr>

            <td width="40%">ws</td><td width="40%">ws</td><td width="20%">ws</td>

        </tr>

    </table>

此外，由于设置<td>边框时，会导致左右边框重合，边框变粗，所以应该只设置一侧边框border-left：

3）几个使用的特性：

border-collapse:collapse;//属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示（separate）。
empty-cells: show;//属性设置是否显示表格中的空单元格（仅用于“分离边框”模式，即border-collapse:separate）。

有关<table>的几个问题的更多相关文章

  1. 散列表(hash table)——算法导论(13)

    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...

  2. React使用antd Table生成层级多选组件

    一.需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限.于是写了一种实现的方式.首先应用是一个二级树,一级表示的是应用分组,二级 ...

  3. 创建几个常用table展示方式插件

    这次和大家分享的是自己写的一个table常用几种展示格式的js插件取名为(table-shenniu),样式使用的是bootstrap.min.css,还需要引用jquery.min.js包,这个插件 ...

  4. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  5. MySQL中You can't specify target table for update in FROM clause一场

    mysql中You can't specify target table <tbl> for update in FROM clause错误的意思是说,不能先select出同一表中的某些值 ...

  6. 打印Lua的Table对象

    小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...

  7. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  8. css设置table表格tr分离

    table { border-collapse:separate; border-spacing:10px 50px; }

  9. MySQL: Table 'mysql.plugin' doesn't exist的解决

    安装解压版MySQL以后,不能启动,日志里面出现了这个错误: MySQL: Table 'mysql.plugin' doesn't exist 这是因为mysql服务启动时候找不到内置数据库&quo ...

  10. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

随机推荐

  1. jQuery 关于 end() 方法的详细解释

    <ul class="first"> <li class="foo">list item 1</li> <li> ...

  2. android application plugins framework

    android插件式开发 android application plugins framework http://code.google.com/p/android-application-plug ...

  3. 为什么socket编程要用到多线程

    不得不佩服计算机先驱的设计:socket编程为什么需要多线程.如果只有一个ServerSocket线程,那么如下代码: public void start() throws Exception { S ...

  4. 怎么在官网下载jstl【配图详解】

    JSTL(JSP Standard Tag Library,JSP标准标签库)是一个非常优秀的开源JSP标签库,如果要在系统使用JSTL标签,则必须将jstl.jar和 standard.jar文件放 ...

  5. 【LeetCode OJ】Longest Consecutive Sequence

    Problem Link: http://oj.leetcode.com/problems/longest-consecutive-sequence/ This problem is a classi ...

  6. TableView--通讯录--开篇

    一,需求图:

  7. SqlSever2005 一千万条以上记录分页数据库优化经验总结

    http://www.cnblogs.com/jirigala/archive/2010/11/03/1868011.html 待测试???

  8. OpenHCI - Open Host Controller Operational Registers

    The Host Controller (HC) contains a set of on-chip operational registers which are mapped into a non ...

  9. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  10. iOS学习笔记---oc语言第一天

    第一讲 初始类和对象 c语言的超集,允许在oc中使用c语言源代码.编译器兼容c语言程序 具备完善的面向对象特性 包含一个运行时系统 类库丰富 面向对象编程 oop 面向对象语言:c++  java   ...