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. 理解NSAttributedString

    An NSAttributedString object manages character strings and associated sets of attributes (for exampl ...

  2. D - Mysterious Present

    这个题和求最长递增序列的题类似,为了能输出一组可行的数据,我还用了一点儿链表的知识. Description Peter decided to wish happy birthday to his f ...

  3. IOS源码封装成.bundle和.a文件时,使用单例作为出口的写法!任何封装都建议使用这种方法作为出口

    头文件 以此作为模板,记录于此 #import <Foundation/Foundation.h>#import <UIKit/UIKit.h>//this can write ...

  4. My97DatePicker日期控件用法

    用法很简单,主要演示都在myDate.html  <meta http-equiv="content-type" content="text/html; chars ...

  5. PHP extract() 函数

    PHP extract() 函数从数组中把变量导入到当前的符号表中. 对于数组中的每个元素,键名用于变量名,键值用于变量值. 第二个参数 type 用于指定当某个变量已经存在,而数组中又有同名元素时, ...

  6. 【转】Facebook React 和 Web Components（Polymer）对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  7. WCF服务端行为的一些设置

    [ServiceBehavior( InstanceContextMode = InstanceContextMode.Single,   //表示所有的请求都用一个服务实例来处理 Concurren ...

  8. qq红心头像[中国心]制作教程之Photoshop教程

    QQ红心头像[中国心]制作教程之Photoshop教程 中国最大的WEB开发资源网站及技术社区,阿里西西WEB开发 最近网络流传着很多qq红心头像,msn红心头像,中国心图标等等,最有些搞笑的是还有正 ...

  9. Linked List Cycle II

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Note ...

  10. 用python matplotlib 画图

    state-machine environment object-oriente interface figure and axes backend and frontend user interfa ...