css怎么设置表格样式？css设置表格样式的方法

不言

发布时间：2018-08-18 14:16:10

5893人浏览过

来源于php中文网

原创

一个简单的表格有时会感觉很单调，那么怎么给css表格加样式呢？本篇文章就给大家介绍关于css表格样式的设置方法。

1、一个简单的表格
table.html

课程表
星期\课程	星期一	星期二	星期三	星期四	星期五
1-2节	数学	语文	化学	英语	英语
3-4节	英语	物理	化学	英语	体育
5-6节	数学	物理	体育	化学	美术
7-8节	数学	美术	化学	英语	体育
9-10节	生物	美术	生物	英语	物理

table.css

WaStar 网上花店系统

系统特点：商品多级分类检索、搜索，支持同一商品多重分类，自由设置显示式样自由设置会员类型，自由设置权限项目，自由分配每种会员类型和每个会员的权限灵活的商品定价，最多12级价格自由分配给各种会员类型或会员，也可针对单会员单商品特殊定价强大的会员管理、帐户管理、订单管理功能和一系列帐务查询统计功能灵活的会员积分系统，自由设置每个积分事件的积分计算方法灵活的网站内容发布、管理系统，每个栏目可

下载

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;
    }

2、边框合并：boder-collapse
属性值：
separate;（分开，默认）
collapse;（合并）

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:collapse;
    }

3、边框间距border-spacing(前提是：border-collapse:separate;)

立即学习“前端免费学习笔记（深入）”；

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;
    }

4、设置表格标题的位置caption-side
属性值：
top;//默认
bottom;
left;
right;

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;    
    caption-side:bottom;
    }

5、当单元格对象宽度超过单元格所定义的宽度时，可用table-layout：fixed保持表格宽度不被改变
属性值：auto(默认)
fixed(宽度固定)
table.css

table,td,th{
    border:1px solid #aaa;
        font-size: 23px;    
        border-collapse:separate;    
        border-spacing: 5px;    
        table-layout: fixed;    
        caption-side:top;
        }

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

503

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

261

2023.07.27