表格列大小涉及colspan

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

您可以使用col专为此设计的HTML 元素:样式化或定义整个列的公共属性.

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>