制作css表格
CSS表格制作方法
使用CSS可以创建各种样式的表格，以下是一些常见的实现方式：
基础表格样式
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}响应式表格
当屏幕宽度较小时，表格可以横向滚动：
.table-responsive {
overflow-x: auto;
}斑马条纹效果
tr:nth-child(odd) {
background-color: #f2f2f2;
}悬停效果
tr:hover {
background-color: #e6e6e6;
}圆角表格
table {
border-radius: 5px;
overflow: hidden;
}固定表头
thead {
position: sticky;
top: 0;
}单元格对齐
td {
vertical-align: middle;
text-align: center;
}边框样式
table {
border: 2px solid #333;
}
td {
border: 1px solid #ccc;
}使用Flexbox创建表格
<div class="flex-table">
<div class="flex-row header">
<div class="flex-cell">标题1</div>
<div class="flex-cell">标题2</div>
</div>
<div class="flex-row">
<div class="flex-cell">内容1</div>
<div class="flex-cell">内容2</div>
</div>
</div>.flex-table {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
}
.flex-cell {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
}
.header .flex-cell {
font-weight: bold;
background-color: #f5f5f5;
}表格间距控制
table {
border-spacing: 10px;
}合并单元格样式
td[colspan="2"] {
background-color: #e1e1e1;
}表格阴影效果
table {
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}单元格宽度控制
td:nth-child(1) {
width: 30%;
}
td:nth-child(2) {
width: 70%;
}这些方法可以根据需要组合使用，创建出各种美观实用的表格样式。
