有关table的几个问题

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）。

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5805791.html

有关table的几个问题相关推荐

IDEA中根据数据库自动生成实体类，并自定义所生成的实体类中的注解 @Table @Id @...
使用IDEA项目添加Hibernate扩展,生成实体类并配置实体类中的注解一.使用Hibernate自动生成实体类 1.在项目上右键,选择Add Framework Support找到 Hibern ...
2021年大数据Flink（三十九）：Table与SQL 总结 Flink-SQL常用算子
目录总结 Flink-SQL常用算子 SELECT WHERE DISTINCT GROUP BY UNION 和 UNION ALL JOI ...
2021年大数据Flink（三十八）：Table与SQL 案例五 FlinkSQL整合Hive
目录案例五 FlinkSQL整合Hive 介绍集成Hive的基本方式准备工作 1.添加hadoop_classpath 2.下载jar并上传至flink/lib目录 3.修改hive配置 4.启 ...
2021年大数据Flink（三十七）：Table与SQL 案例四
目录案例四需求代码实现案例四需求从Kafka中消费数据并过滤出状态为success的数据再写入到Kafka {"user_id": "1", &qu ...
2021年大数据Flink（三十六）：Table与SQL 案例三
目录案例三需求编码步骤代码实现-方式1 代码实现-方式2 案例三需求使用Flink SQL来统计5秒内每个用户的订单总数.订单的最大金额.订单的最小金额也就是每隔5秒统计最近5秒的每 ...
2021年大数据Flink（三十五）：Table与SQL 案例二
目录案例二需求代码实现-SQL 代码实现-Table 案例二需求使用SQL和Table两种方式对DataStream中的单词进行统计代码实现-SQL package cn.it.sql;i ...
2021年大数据Flink（三十四）：Table与SQL 案例一
目录案例一需求代码实现案例一需求将DataStream注册为Table和View并进行SQL统计代码实现 package cn.it.sql;import lo ...
2021年大数据Flink（三十三）：Table与SQL相关概念
目录相关概念 Dynamic Tables & Continuous Queries Table to Stream Conversion 相关概 ...
2021年大数据Flink（三十二）：Table与SQL案例准备 API
目录 API 获取环境创建表查询表 Table API SQL 写出表与DataSet/DataStream集成 TableAPI SQL ...
2021年大数据Flink（三十一）：Table与SQL案例准备依赖和程序结构
目录案例准备依赖程序结构案例准备依赖 https://ci.apache.org/projects/flink/flink-docs-release-1.12/d ...

有关table的几个问题

有关table的几个问题相关推荐

最新文章

热门文章