CSS-设置表格样式
2024-06-01 11:42:57
1、设置表格的边框
Border：设置表格边框；
Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；
Border-spacing ：设置单元格的间距；
Padding：设置单元格内容和边框之间的距离；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格的边框</title>
<style type="text/css">.t{border: 1px gray solid;border-spacing: 0px;border-collapse: collapse;}.t td{border: 1px gray solid;padding: 5px;}.t th{border: 1px gray solid;padding: 5px;}
</style>
</head>
<body><table class="t"><caption>学生信息</caption><thead><tr><th>序号</th><th>学号</th><th>姓名</th><th>性别</th><th>出生日期</th></tr></thead><tbody><tr><th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td></tr><tr><th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td></tr><tr><th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td></tr><tr><th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td></tr><tr><th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td></tr></tbody><tfoot><tr><th>总计</th><th colspan="4">5条数据</th></tr></tfoot></table>
</body>
</html>
运行结果：
2、设置表格的宽度
Table-layout
默认 auto 自动方式，根据单元格的内容自动调整宽度；
Fixed 固定方式 表格宽度固定；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格的宽度</title>
<style type="text/css">.t{border: 1px gray solid;border-spacing: 0px;border-collapse: collapse;width: 500px;table-layout: fixed;}.t td{border: 1px gray solid;padding: 5px;}.t th{border: 1px gray solid;padding: 5px;}
</style>
</head>
<body><table class="t"><caption>学生信息</caption><thead><tr><th>序号</th><th>学号</th><th>姓名</th><th>性别</th><th>出生日期</th></tr></thead><tbody><tr><th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td></tr><tr><th>2</th><td>002</td><td>杜子腾222222222222222222222222222222222222222222222222222222222222222222222222222</td><td>女</td><td>2011-11-11</td></tr><tr><th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td></tr><tr><th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td></tr><tr><th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td></tr></tbody><tfoot><tr><th>总计</th><th colspan="4">5条数据</th></tr></tfoot></table>
</body>
</html>
运行结果：
3、设置表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格隔行换色</title>
<style type="text/css">.t{border: 1px gray solid;border-spacing: 0px;border-collapse: collapse;width: 500px;table-layout: fixed;}.t tr{background-color: #CCC;}.t td{border: 1px gray solid;padding: 5px;}.t th{border: 1px gray solid;padding: 5px;}tbody tr.even{background-color: #AAA;}
</style>
</head>
<body><table class="t"><caption>学生信息</caption><thead><tr><th>序号</th><th>学号</th><th>姓名</th><th>性别</th><th>出生日期</th></tr></thead><tbody><tr><th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td></tr><tr class="even"><th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td></tr><tr><th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td></tr><tr class="even"><th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td></tr><tr><th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td></tr></tbody><tfoot><tr><th>总计</th><th colspan="4">5条数据</th></tr></tfoot></table>
</body>
</html>
运行结果：
4、设置表格列样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格列样式</title>
<style type="text/css">.t{border: 1px gray solid;border-spacing: 0px;border-collapse: collapse;width: 500px;table-layout: fixed;}.t tr{background-color: #CCC;}.t td{border: 1px gray solid;padding: 5px;}.t th{border: 1px gray solid;padding: 5px;}tbody tr.even{background-color: #AAA;}th+td{text-align: center;}th+td+td+td{text-align: center;background-color: red;}
</style>
</head>
<body><table class="t"><caption>学生信息</caption><thead><tr><th>序号</th><th>学号</th><th>姓名</th><th style="width: 50px;">性别</th><th>出生日期</th></tr></thead><tbody><tr><th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td></tr><tr class="even"><th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td></tr><tr><th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td></tr><tr class="even"><th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td></tr><tr><th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td></tr></tbody><tfoot><tr><th>总计</th><th colspan="4">5条数据</th></tr></tfoot></table>
</body>
</html>
运行结果：
5、设置鼠标经过时行变色效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置鼠标经过时行变色效果</title>
<style type="text/css">.t{border: 1px gray solid;border-spacing: 0px;border-collapse: collapse;width: 500px;table-layout: fixed;}.t caption{font-size: 24px;}.t tr{background-color: #CCC;}.t td{border: 1px gray solid;padding: 5px;}.t th{border: 1px gray solid;padding: 5px;}tbody tr.even{background-color: #AAA;}th+td{text-align: center;}th+td+td+td{text-align: center;background-color: red;}tbody tr:HOVER {background-color: aqua;}
</style>
</head>
<body><table class="t"><caption>学生信息</caption><thead><tr><th>序号</th><th>学号</th><th>姓名</th><th style="width: 50px;">性别</th><th>出生日期</th></tr></thead><tbody><tr><th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td></tr><tr class="even"><th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td></tr><tr><th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td></tr><tr class="even"><th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td></tr><tr><th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td></tr></tbody><tfoot><tr><th>总计</th><th colspan="4">5条数据</th></tr></tfoot></table>
</body>
</html>
运行结果：
CSS-设置表格样式相关推荐
- 仿Word自动套用格式，用CSS设置表格样式
找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: [样式分析]: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属 ...
- word套用表格样式怎么设置_仿Word自动套用格式使用CSS设置表格样式实例
找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: [样式分析]: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属 ...
- word套用表格样式怎么设置_仿Word自动套用格式，用CSS设置表格样式
找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: [样式分析]: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属 ...
- 用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式 第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式. 创建简单和复杂的表单布局 对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
- CSS的表格样式和列表样式
-----------------------------------------------CSS的表格样式和列表样式---------------------------------------- ...
- html表格与CSS控制表格样式
表格是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来. 这就是一个表格 ,清清楚楚的列出了英雄们的排名. 思维导图 <table>标签 用<tabl ...
- css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动 一.需求 二.实现 一.需求 需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
- Delphi设置表格样式
//设置表格样式 wordDoc.Tables.Item(1).Borders.Item(Word.WdBorderType.wdBorderLeft).LineStyle = Word.WdLine ...
- html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal ...
- Word或WPS中批量设置表格样式的宏
在编写word文档的过程中,有时候会使用很多的表格,执行如下宏,批量设置全部表格的样式 Sub 批量设置表格样式() ' ' 批量设置表格样式 Macro 'On Error Resume NextD ...
最新文章
- iis占用服务器内存,W3wp.exe 进程占用内存高消耗CPU近100%导致网站反应速度缓慢的解决方案...
- 大话数据库连接池简史，你都用过几个？
- 使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
- 3D景深排序碰到的问题
- Spark Streaming揭秘 Day16 数据清理机制
- 关于Kernel的思考
- Jquery Validate 动态添加校验
- mysql、orcl中database、schema、user之间的关系
- Debian Buster Nginx 布署 Brophp 项目（类 Thinkphp）
- 数据库连接失败could not find driver 解决方法
- view函数_python测试开发django63.基于函数的视图(@api_view())
- 只安装mysql客户端_单独安装mysql客户端
- 电脑未安装任何音频设备解决办法
- 灵敏度 和 特异度的计算
- java取万位的值,Excel中表格数值进行取万位整数的操作方法
- MobaXterm使用技巧
- vs2010环境下提示找不到d3dx9.h，及其“dxerr.lib”。
- 有一个女孩 名叫花木兰
- 成都盛铭轩：商品标题怎么写
- 基于Python pdfplumber实现PDF转WORD