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. Android布局— — —帧布局

    帧布局,开发中很少使用,最简单的布局 添加多个控件,这些控件会按顺序在屏幕左上角重叠显示,且会透明显示之前控件的文本语法格式:<?xml version="1.0" enco ...

  2. WPF如何实现类似iPhone界面切换的效果(转载)

    WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上 ...

  3. 数组prototype添加函数呢，采用回调判定函数内容

    1.解决方案 Array.prototype.all = function (p) { return this.filter(p).length == this.length; }; Array.pr ...

  4. SQL Server LEFT Functions

    LEFT(string, n)函数,是处理字符数据获取子字符串.第一个参数是将要处理的字符串,第二个参数,是从字符串的左边开始截取的字符个数. 例子: DECLARE @string NVARCHAR ...

  5. FSM

    一.状态机简单介绍 软件设计中的状态机概念,一般是指有限状态机(英语:finite-state machine,缩写:FSM)又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和 ...

  6. 使用Office 365 试用账户 体验Office 365功能

    首先,需要申请Office 365 Enterprise E3版本的试用账户. 在浏览器中,输入以下地址,然后回车: http://products.office.com/en-us/business ...

  7. dedecms 蜘蛛抓取设置 robots.txt

    我们可以用robots.txt屏蔽蜘蛛文件来跟蜘蛛来达成一个协议,但现在很少注重,其实用好robots.txt屏蔽蜘蛛文件,能给你的网站提高权重,接下来重庆SEO讲一下robots.txt屏蔽蜘蛛文件 ...

  8. Sublime Text 2 安装主题的方法

    主题下载 下载一个主题,例如: https://github.com/hyspace/st2-reeder-theme 里面起作用的文件有两个: Reeder.sublime-theme Earths ...

  9. 在centos使用rpm包的方式安装mysql，以及更改root密码

    在centos使用rpm包的方式安装mysql,对于centos官方实际推荐使用yum进行安装,下载安装的方式主要用于内网服务器不能连接外网yum源的情况. 下载包 首先根据centos版本在mysq ...

  10. Oracle数据库Linux下的导入IMP

    和相关篇的EXP相对应的用了如下的导入方法. [oracle@localhost ~]$ imp Import: Release 11.2.0.1.0 - Production on Fri Sep ...