制作一个表格使表格之间没有间隙只有一个分割线隔开
时间: 2024-09-12 21:05:36 浏览: 54
要制作一个表格并且让相邻的单元格之间没有间隙,只有一个分隔线将它们隔开,你可以使用HTML和CSS来完成。以下是一个基本的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
table {
border-collapse: collapse; /* 合并单元格间的边框 */
width: 100%; /* 自适应宽度 */
}
th, td {
border: 1px solid #ccc; /* 单元格边框 */
padding: 8px; /* 内边距,可以根据需求调整 */
text-align: center; /* 文本居中 */
}
/* 只有一条分隔线 */
tr:last-child td,
tr:not(:last-child):nth-child(-n+2) { /* 除了最后一行外,前两行之间的行 */
border-bottom: none; /* 不显示底部边框 */
}
</style>
</head>
<body>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
</table>
</body>
</html>
```
在这个例子中,`border-collapse: collapse;`会合并相邻单元格的边框,使得看起来像只有一条线。`tr:last-child td` 和 `tr:not(:last-child):nth-child(-n+2)` 选择器确保了除最后一行之外的其他行都没有底部边框。如果你想要更复杂的布局,可能需要添加更多的CSS规则来定制样式。
阅读全文