Question

HTML概念有时非常糟糕。

这是我在html表中使用colspan的代码，看起来并不像我期望的那样。

<table border="1">
  <tr>
    <td colspan="3">a</td>
  </tr>
  <tr>
    <td colspan="2">b</td>
    <td>c</td>
  </tr>
</table>

我想要的是：单元格'a'应该看起来 3个单元格宽，单元格'b'应该看起来 2个单元格宽，单元格'c'应该看起来 1个单元格。

它正在做的是：单元格'a' 2个单元格宽，单元格'b'＆amp; 'c' 1个单元格。

任何建议都要感谢。

Answer 1

属性colspan确定单元格相对于其他单元格重叠的列数，而不是这些列的绝对大小。在您的情况下， span 2有两个跨度。你怎么能说它不是？不要通过细胞的宽度来判断它。 span不是宽度。您必须将另一个较小的列添加到显示它作为两个跨度的列。

在最后一个示例的代码段中查看您期望的解决方案。

＆＃13;

<h3>Example 1</h3>

<table border="1">
    <tr><td>col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">a</td></tr>
    <tr><td colspan="2">b</td><td colspan="1">c</td></tr>
</table>

<h3>Example 2</h3>

<table border="1">
    <tr><td width="80px">wide col1</td><td>col2</td><td>col3</td></tr>
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2">span 2</td><td colspan="1">span 1</td></tr>
</table>

<h3>Your case</h3>

<table border="1">
    <tr><td colspan="3">span 3</td></tr>
    <tr><td colspan="2" width="66%">span 2</td><td width="33%">span 1</td></tr>
</table>

＆＃13;

Answer 2

因此colspan确实可以达到预期目的。表中有n列，每个表单元格<td>都是一列宽。使用colspan可将单元格跨更多列。这与每一列的width无关。

如果您希望所有列都属于同一width，则必须使用一些样式。

尽管使用某些CSS网格可能更容易，但是表格的解决方案如下：

/* You can make a separate file where you calculate n dynamically and you just
 * link the file with :root { ... } into html <head> */
:root {
  --n: 3; /*number of columns */
}
div {
  /* container for mobile because max-width only works on block elements */
  width: 30em;
  max-width: 100%;
}
table {
  /* table takes the whole container */
  width: 100%;
}
/* the following is enough for this example */
/* td:not([colspan]) {
  width: calc(100% / var(--n));
} */

/* if you don't have any (or well enough placed) table cells without colspan
 * attribute, then you have to calculate each possibilty like so: */
td {
  width: calc(100% / var(--n));
}
td[colspan="2"] {
  width: calc(100% * 2 / var(--n));
}
td[colspan="3"] {
  width: calc(100% * 3 / var(--n));
}
/* and so forth up to maximum possible n */

<div>
  <table border=1>
    <tr>
      <td colspan=2>b</td>
      <td>a</td>
    </tr>
    <tr>
      <td colspan=3>c</td>
    </tr>
  </table>
</div>

Answer 3

您已经回答了您的问题，因为您的代码工作正常，但最大数量仅为2。如果添加另一行，您将看到所需的结果。

table {
  width: 300px;
]

<table border="1">
  <tr>
    <td colspan="3">column 1</td>
  </tr>
  <tr>
    <td colspan="2">column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column n</td>
    <td>column n</td>
    <td>column n</td>
  </tr>
</table>

table {
 width: 200px;
}

<table border="1">
  <tr>
    <td>column</td>
    <td>column</td>
    <td>column</td>
  </tr>
  <tr>
    <td colspan="3">column 1</td>
  </tr>
  <tr>
    <td colspan="2">column 2</td>
    <td>column 3</td>
  </tr>
</table>

您的代码将显示所需的结果，就像您添加另一行一样！！

html表colspan没有按预期工作

3 个答案: