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. 关于$.getJson

    这是一个Ajax函数的缩写,这相当于: 1 2 3 4 5 6 $.ajax({ dataType: "json", url: url, data: data, success: ...

  2. oracle 删除表和数据分析语句

    TRUNCATE TABLE 表名;ANALYZE TABLE 表名 ESTIMATE STATISTICS;

  3. <em>标签

    <em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用斜体来显示.

  4. (转)Document对象内容集合

    原文:http://webcenter.hit.edu.cn/articles/2009/06-10/06144703.htm document 文挡对象 - JavaScript脚本语言描述 ——— ...

  5. SVG 2D入门6 - 坐标与变换

    坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系.默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下:如下图所示: SVG的视窗位置一般是由 ...

  6. Python运算符与表达式

    Python运算符包括赋值运算符.算术运算符.关系运算符.逻辑运算符.位运算符.成员运算符和身份运算符. 表达式是将不同类型的数据(常亮.变量.函数)用运算符按照一定得规则连接起来的式子. 算术运算符 ...

  7. HDU 4407

    http://acm.hdu.edu.cn/showproblem.php?pid=4407 把修改和询问分成两部分解决 询问求区间内与p不互素的和,和求个数一样,用容斥原理解决,只不过做容斥的时候把 ...

  8. 第三个Sprint冲刺第二天 最终篇

    一.例会人员:李泳江,邵家文,周伟雄,谢洪跃 日期:6月21号   例会内容: 1.完成表格任务 编号 名称 时间 已用时间 是否完成 1 画出算法流程图 4小时 4小时 完成 2 界面设计 5小时 ...

  9. MINIX3 进程通信分析

    MINIX3 进程通信分析 6.1MINIX3 进程通信概要 MINIX3 的进程通信是 MINIX3 内核部分最重要的一个部件,我个人认为其实这 是内核中的“内核”,怎么来理解这个概念呢?其实 MI ...

  10. Qt的QLineEdit显示密码

    ui->lineEdit->setEchoMode( QLineEdit::Password );