Html 表格宽度不适用于不同的列数答案

【问题标题】：Html table width is not proper for diff number of columnsHtml 表格宽度不适用于不同的列数
【发布时间】：2019-02-23 06:11:42
【问题描述】：

我正在使用 HTML 表格。我创建了一个有 3 行的表。第一行有一个“键”列和一个“值”列。第二行有一个“键”列和两个“值”列。第三行有一个“键”列和三个“值”列。虽然第三行有 3 列。所以我给了第一行第一列“colspan = 3”，但是第二行有两列，所以我必须将它的宽度与第三行匹配。但我不能给出“colspan=1.5”。即使我把它当作四舍五入。我需要将第一列和第二列的宽度与第一列相匹配。

<table>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
    <td>Value</td>
  </tr>
  <tr
    <td>Key</td>
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
  </tr>
</table>

我需要创建如下图所示的表。我尝试了 colspan 但它不起作用。

【问题讨论】：

对于第二列，您可以使用 colspan 1 的 2 个 td 和 colspan 3 的第二个，然后在内部使用 2 个 div，宽度为 50%

标签： html css html-table multiple-columns

【解决方案1】：

根据给定的图像，您可以使用内部 HTML：

<table>
  <tr>
    <td>Key</td>
    <td colspan="3">Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td colspan="3">
        <table>
            <tr>
                <td>Value</td>
                <td>Value</td>
            </tr>
        </table>
    </td>

  </tr>
  <tr
    <td>Key</td>
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
  </tr>
</table>

【讨论】：

是的，它可以工作，但是如果我应用了边框，我必须编写 css 来删除多余的边框。

【解决方案2】：

给你

<table>
    <tbody>
        <tr>
            <td>Key</td>
            <td colspan="6">Value</td>
        </tr>
        <tr>
            <td>Key</td>
            <td colspan="3">Value</td>
            <td colspan="3">Value</td>
        </tr>
        <tr> <td>Value</td>
            <td colspan="2">Value</td>
            <td colspan="2">Value</td>
            <td colspan="2">Value</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案3】：

将其分解为更多的跨度。基本上把你第一次做的乘以 2。

像这样：

<table>
  <tr>
    <td>Key</td>
    <td colspan="6">Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td colspan="3">Value</td>
    <td colspan="3">Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td colspan="2">Value</td>
    <td colspan="2">Value</td>
    <td colspan="2">Value</td>
  </tr>
</table>

在这里工作的小提琴：

https://jsfiddle.net/t9woe310/3/

【讨论】：

【解决方案4】：

试试这个。

<table>
    <tr><td>Key</td>
        <td colspan=6>value</td>
    </tr>
    <tr>
        <td>key </td>
        <td colspan=3>value</td>
        <td colspan=3>value</td>
    </tr>
    <tr>
        <td>Key</td>
        <td colspan=2>value</td>
        <td colspan=2>value</td>
        <td colspan=2>value</td>
    </tr>
</table>

【讨论】：