html宽度为1000px表格中有5列单元格其中第一列像素为20px,第四列和第五列设置了固定宽度为300px,剩下的是第二列和第三列是自适应单元格的宽度,在不设置固定宽度的情况下,能让第二列的宽度为180px,第三列的宽度为300px,请提供代码
时间: 2024-11-18 14:18:32 浏览: 3
HTML 中创建这样一个宽度为 1000px 的表格,并让第一列固定为 20px,第四列和第五列固定为 300px,其余两列自适应宽度,可以这样实现:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
table {
width: 1000px;
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid #ccc; /* 边框样式 */
padding: 8px;
}
/* 第一列设置固定宽度 */
col:nth-child(1) {
width: 20px;
}
/* 固定宽度的第四列和第五列 */
col:nth-child(4), col:nth-child(5) {
width: 300px;
}
/* 自适应宽度的第二列和第三列 */
col:nth-child(2), col:nth-child(3) {
width: auto;
}
</style>
</head>
<body>
<table>
<tr>
<!-- 第一列 -->
<th>第一列</th>
<!-- 第二列 -->
<th>第二列</th>
<!-- 第三列 -->
<th>第三列</th>
<!-- 第四列 -->
<th>第四列</th>
<!-- 第五列 -->
<th>第五列</th>
</tr>
<!-- 表格数据... -->
</table>
</body>
</html>
```
在这个例子中,`<col>` 标签用于指定列的宽度,`nth-child()` 伪类选择器用于选择特定索引的列。第二列和第三列的宽度会根据内容自动调整,直到所有列占据整个可用空间。
阅读全文