Question

我正在尝试构建一个非常简单的数组，但不知何故它不起作用我认为它应该如何。这是一个例子：

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table width=100%>
  <tr>
    <th colspan="8">sigle row of 8 cols</th>
  </tr>
  <tr >
    <td colspan="2">2 cols </td>
    <td rowspan="3" colspan="6" > 6 cols</td>
  </tr>
  <tr>
    <td colspan="2">2 cols</td>
  </tr>
    <tr>
    <td colspan="2">2 cols</td>
  </tr>
</table>

</body>
</html>

请帮我调试。我希望几个月只占用2列，并且保存占用6列（其余的），但是，这不能按预期工作。我知道答案是微不足道的，但我找不到它。你能告诉我出了什么问题吗？

Answer 1

该表将有8列，但您已经有效地将其缩减为2.表格渲染算法将使事情尽可能高效。

通过添加额外的行，您可以看到正在发生的事情

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table width=100%>
  <tr>
    <th colspan="8">Monthly Savings</th>
  </tr>
  <tr >
    <td colspan="2">January</td>
    <td rowspan="3" colspan="6" >$30000</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
    <tr>
    <td colspan="2">March</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

</body>
</html>

＆＃13;

你最好做的是为列分配宽度

＆＃13;

table, th, td {
    border: 1px solid black;
}

＆＃13;

<table width=100%>
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr >
    <td style="width:33%">January</td>
    <td rowspan="3" style="width:66%" >$30000</td>
  </tr>
  <tr>
    <td>February</td>
  </tr>
    <tr>
    <td>March</td>
  </tr>
</table>

＆＃13;

Answer 2

因为您添加heading in single <th>所以使ID不同

<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>

因此它会显示2 for month和6 for saving

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table width=100%>
    <tr>
      <th colspan="2">Monthly</th>
      <th colspan="6">Savings</th>
    </tr>
    <tr>
      <td colspan="2">January</td>
      <td rowspan="3" colspan="6">$30000</td>
    </tr>
    <tr>
      <td colspan="2">February</td>
    </tr>
    <tr>
      <td colspan="2">March</td>
    </tr>
  </table>

</body>

</html>

HTML：如何使用colspan和rowspan？

2 个答案: