html - 表、行跨度和列跨度

标签 html css html-table

这是我关于所附表格的代码。我有一个问题,因为我的 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>

Image

最佳答案

您需要为标题中的最后一个单元格和表格主体第一行中的最后一个单元格添加 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/

相关文章:

python - Django 自定义小部件在 1 以上的选择上失败(输入整数)

html - 如何在 Bootstrap 导航选项卡之间有分隔符/分隔符

javascript - 使用 JS 取消隐藏后,设置了 colspan 的隐藏 <td> 不起作用

html - 我如何使用 :before property to create a square before a span

html - 如何在没有任何 div 的情况下将 anchor 标记元素垂直和水平居中?

javascript - 如何使用格式化文本附加新的 "p"元素

html - 文件 .scss 未在构建中生成

html - 是否有可以交换表格行和列的 CSS/HTML 属性/特性?

php - 有人帮助我使用 Css 或在表格中打印此数组

javascript - Markerclusterer 根据其中的标记设置标记簇图标