资料库 – 中文知识库

CSS表格布局，轻松掌握表格样式设置

—

by

admin
in

在网页设计中，表格是一种常用的数据展示方式。通过CSS，我们可以轻松地设置表格的样式，使其更加美观和易于阅读。本文将详细介绍CSS表格布局的基本概念、常用属性以及如何设置表格样式。
基本概念
CSS表格布局主要包括以下几个部分：

：定义表格。

：定义表格行。

：定义表格单元格。

 ：定义表格头单元格。
常用属性
表格整体样式
table-layout
：设置表格布局算法，可选值有
auto
和
fixed
。
auto
表示自动布局，
fixed
表示固定布局。
table {
table-layout: fixed;
}
border-collapse
：设置表格边框的合并方式，可选值有
collapse
和
separate
。
collapse
表示边框合并，
separate
表示边框分开。
table {
border-collapse: collapse;
}
border-spacing
：设置相邻单元格边框之间的间距。
table {
border-spacing: 10px 5px;
}
empty-cells
：设置当表格的单元格中没有内容时，是否显示该单元格的边框，可选值有
show
和
hide
。
table {
empty-cells: show;
}
单元格样式
border
：设置单元格边框，包括边框宽度、样式和颜色。
td {
border: 1px solid black;
}
padding
：设置单元格内边距。
td {
padding: 10px;
}
background-color
：设置单元格背景颜色。
td {
background-color: #f0f0f0;
}
text-align
：设置单元格文本对齐方式，可选值有
left
、
center
和
right
。
td {
text-align: center;
}
vertical-align
：设置单元格垂直对齐方式，可选值有
top
、
middle
、
bottom
和
baseline
。
td {
vertical-align: middle;
}
表头样式
background-color
：设置表头背景颜色。
th {
background-color: #e0e0e0;
}
font-weight
：设置表头字体粗细。
th {
font-weight: bold;
}
text-align
：设置表头文本对齐方式。
th {
text-align: center;
}
响应式表格
为了适应不同设备屏幕尺寸，我们可以使用CSS媒体查询来调整表格的布局和样式。
@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
td, th {
display: block;
width: 100%;
}
}
总结
通过以上介绍，相信你已经掌握了CSS表格布局的基本概念和常用属性。在实际应用中，可以根据需求灵活运用这些属性，设置出美观、易读的表格样式。