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. poj2137 dp

    //Accepted 228K 32MS //dp[k][i][j] 表示从1的k号节点到i的j号节点的最小花费 //dp[k][i][j]=min(dp[k][i-1][h]+cost) cost为 ...

  2. (转)面向移动设备的HTML5开发框架

    (原)http://www.cnblogs.com/itech/archive/2013/07/27/3220352.html 面向移动设备的HTML5开发框架   转自:http://blogrea ...

  3. 解决：insert Vodafone sim card,open the mms read report,when receive the read report,cann't download..

    insert Vodafone sim card,open the mms read report,when receive the read report,cann't download the m ...

  4. 黑马程序员——【Java基础】——多线程

    ---------- android培训.java培训.期待与您交流! ---------- 一.概述 (一)进程 正在执行中的程序,每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控 ...

  5. PHP中的文件系统处理（一）

    PHP文件系统处理     所有文件处理都是使用系统函数完成的.     是基于Linux/Unix系统为模型        文件系统处理的作用:           1. 所有的项目离不开文件处理  ...

  6. 在php中需要用到的mysql数据库的简单操作

    1.数据库连接 1.1用windows命令行链接数据库服务器 几个DOS命令 在DOS环境下命令后面没有分号,在MySQL环境下,命令后面有分号 进入盘符: 语法:盘符: 进入盘符下的某个文件夹 语法 ...

  7. context理解

    官方文档的解释是:Context提供了关于应用环境全局信息的接口.它是一个抽象类,它的执行被Android系统所提供.它允许获取以应用为特征的资源和类型.同时启动应用级的操作,如启动Activity, ...

  8. iOS 调用地图导航

    在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_LESS_THAN(v) ([[[UIDevice currentDevic ...

  9. Recaman's Sequence_递推

    Description The Recaman's sequence is defined by a0 = 0 ; for m > 0, am = am−1 − m if the rsultin ...

  10. java作业3

    Java字段初始化的规律: 静态初始化生成实例之后(就是new之后)变成你赋给它的值 ,先执行静态初始化,如果没有实例化,按照初始化块和构造方法在程序中出现的顺序执行. 当多个类之间有继承关系时,创建 ...