Question

我设法实现了预期的设计，但感觉有点像黑客。

因此，我正在使用此表，现在单元格大小看起来完全符合我的期望，但是我必须在表顶部添加额外的行（并将其隐藏，但不是在示例中，这样更容易了解）。因此，如果您尝试删除该第一行，则可以看到所有内容都弄乱了（说明字段看起来并不一样）。

http://jsfiddle.net/nooorz24/cea57mhd/4/

table {
    width: 100%;
}

table td {
    border: 1px solid black;
}

<table>
    <tr>
        <td style="width: 1px;"></td>
        <td style="width: 10000px;"></td>
        <td style="width: 1px;"></td>
        <td style="width: 10000px;"></td>
    </tr>
    <tr>
        <td style="width: 1px;">IMG</td>
        <td style="width: 10000px;" colspan="2">Description text</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td style="width: 1px;">IMG</td>
        <td style="width: 10000px;">Description text</td>
    </tr>
</table>

据我所知，这是因为我尝试将宽度设置为具有colspan =“ 2”的单元格，而html不了解如何使用该宽度。

可以解决此问题而无需添加额外的行吗？

Answer 1

您可以使用为此专门设计的HTML col元素：为整个列设置样式或定义通用属性。

table {
  width: 100%;
}

table td {
  border: 1px solid black;
}

<table>
  <colgroup>
    <col style="width: 1px">
    <col style="width: 10000px;">
    <col style="width: 1px">
    <col style="width: 10000px;">
  </colgroup>
  <tr>
    <td>IMG</td>
    <td colspan="2">Description text</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>IMG</td>
    <td>Description text</td>
  </tr>
</table>

涉及colspan的表列大小

1 个答案: