CSS表格

简介: 【5月更文挑战第4天】CSS表格。

CSS表格
使用 CSS 可以使 HTML 表格更美观。
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark
表格边框
指定CSS表格边框,使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框:
实例
table, th, td
{
border: 1px solid black;
}
请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框,使用 border-collapse属性。
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:
实例
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

相关文章
|
3天前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
36 0
|
6月前
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
7月前
|
前端开发
|
8月前
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
3天前
|
前端开发
编程笔记 html5&css&js 016 HTML表格
编程笔记 html5&css&js 016 HTML表格
|
3天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
32 0
|
3天前
|
移动开发 前端开发 小程序
CSS 如何完美地去除表格的 “双线”
CSS 如何完美地去除表格的 “双线”
|
11月前
|
前端开发
HTML|利用CSS美化一个html表格
HTML|利用CSS美化一个html表格
301 0
|
5月前
|
JavaScript 前端开发
【jQuery学习】—jQuery操作CSS和表格
【jQuery学习】—jQuery操作CSS和表格
|
7月前
|
容器
css3 table表格
css3 table表格
29 0