Question

如何使链接中给定表格中的最后两个条目以方式显示，以便它们共享表格总宽度的50％，例如colSpan应为每个1.5，但这是不可能的。

<table>
 <tr>
 <th>Month</th>
 <th>Savings</th>
 <th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
 <td colspan="3">Sum: $180</td>
</tr>
<tr>
 <td colspan="1">Sum: $180</td>
 <td colspan="1">Sum: $180</td>
</tr>
</table>

Answer 1

因为您有三列并且希望最后两个单元格跨越1.5列 - 这是不可能的，colspan只能使用正整数 - 您必须将1.5乘以导致这两个单元格跨越的数字整列数。在这种情况下，乘数是2。

要执行此操作，您只需更新其他位置的每个单元格，使colspan属性加倍其当前colspan值（那些没有colspan属性的单元格，因此跨越只有一列，必须给出colspan="2"），如下所示：

＆＃13;

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

＆＃13;

<table>
  <tr>
    <th colspan="2">Month</th>
    <th colspan="2">Savings</th>
    <th colspan="2">Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
    <td colspan="2">$100</td>
    <td colspan="2">$100</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
    <td colspan="2">$100</td>
    <td colspan="2">$100</td>
  </tr>
  <tr>
    <td colspan="6">Sum: $180</td>
  </tr>
  <tr>
    <td colspan="3">Sum: $180</td>
    <td colspan="3">Sum: $180</td>
  </tr>
</table>

＆＃13;

更新了JS Fiddle demo。

这个感觉有点像hacky变通方法，但它是有效的HTML，并且避免创建任何新元素 - 尽管<table>现在明确地有六列而不是原始三列;虽然没有创建新的元素，但它们是隐含的，而不是“存在”。在HTML中。

从用户界面的角度来看，值得注意的是，最后两个单元 - 跨越表格宽度的一半 - 与表格标题没有任何明确的关联，可能（或可能不会）使您网站的用户感到困惑。

如何在表的最后一行处理colSpan？

1 个答案: