- 用在表格中，设置每一列的样式
- 一个表格里面只写一次
style
<style>
.col-4{
width: 33.33333%;
}
.col-2{
width: 16.66666%;
}
.prop{
background-color: skyblue;
}
.table{
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
table-layout: fixed;
}
.table td{
border: 1px solid #ccc;
}
</style>
html
<table class="table">
<caption>
<span>col标签</span>
</caption>
<!-- 下面的col标签，表示每一列有4个td,第一个td的样式为col-2 prop -->
<!-- 第二个的样式为col-4 -->
<col class="col-2 prop"></col>
<col class="col-4"></col>
<col class="col-2 prop"></col>
<col class="col-4"></col>
<tr>
<td>name</td>
<td>derek</td>
<td>sex</td>
<td>man</td>
</tr>
<tr>
<td>hobby</td>
<td>guitar</td>
<td>now</td>
<td>coding</td>
</tr>
</table>
效果
image.png
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>col</title>
<style>
.col-4{
width: 33.33333%;
}
.col-2{
width: 16.66666%;
}
.prop{
background-color: skyblue;
}
.table{
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
table-layout: fixed;
}
.table td{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table class="table">
<caption>
<span>col标签</span>
</caption>
<!-- 下面的col标签，表示每一列有4个td,第一个td的样式为col-2 prop -->
<!-- 第二个的样式为col-4 -->
<col class="col-2 prop"></col>
<col class="col-4"></col>
<col class="col-2 prop"></col>
<col class="col-4"></col>
<tr>
<td>name</td>
<td>derek</td>
<td>sex</td>
<td>man</td>
</tr>
<tr>
<td>hobby</td>
<td>guitar</td>
<td>now</td>
<td>coding</td>
</tr>
</table>
</body>
</html>
网友评论