这是我关于所附表格的代码。我有一个问题,因为我的 table 不是我想要的。我是 html5 的初学者,我在 rowspan 和 colspan 方面确实遇到了麻烦。有什么技巧可以更好地了解 rowspan 和 colspan 以及如何按照我想要的方式制作表格。
table,
td,
th {
border: 1px solid #666;
border-collapse: collapse;
}
<table>
<tr>
<th colspan="2">Hi</th>
<th>Hi</th>
</tr>
<tr>
<td>Hi</td>
<td>Hi</td>
<td>hi</td>
</tr>
<tr>
<td>Hi</td>
<td>Hi</td>
<td>hi</td>
<td>hi</td>
</tr>
</table>
最佳答案
您需要为标题中的最后一个单元格和表格主体第一行中的最后一个单元格添加 colspan
,否则它们的列总和将仅为 3(基于 colspan)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
table,
td,
th {
border: 1px solid #666;
border-collapse: collapse;
}
</style>
<title>Assignment 4</title>
</head>
<body>
<table>
<tr>
<th colspan="2">Hi</th>
<th colspan="2">Hi</th>
</tr>
<tr>
<td>Hi</td>
<td>Hi</td>
<td colspan="2">hi</td>
</tr>
<tr>
<td>Hi</td>
<td>Hi</td>
<td>hi</td>
<td>hi</td>
</tr>
</table>
</body>
</html>
关于html - 表、行跨度和列跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61149024/