table 的每一行指定了不同的宽度

Question

有人知道为什么 table 单元格中的每个 width:xx% 都没有被使用吗？

看起来第一行可能设置正确，但第二行中的尺寸被忽略了。

http://jsfiddle.net/bobbyrne01/4fLL8md0/1/

<table>
    <tr>
        <td style="width:80%;">A lot of text on 1 line</td>
        <td style="width:20%">Text</td>
    </tr>
    <tr>
        <td style="width:20%">
            <label>Directory:</label>
        </td>
        <td style="width:80%">
            <input id="directory" readonly="true" />
        </td>
    </tr>
</table>

Answer 1

Table 单元格必须符合 – 否则它不会是 table！您可以使用 colspan 来排序克服此限制。

Answer 2

不可能有任何简单的方法。您可以实现仅在行中使用 2 个以上的单元格并将它们分组。

<table border="1" width="100%">
    <col width="20%">
    <col width="60%">
    <col width="20%">

    <tr>    
        <td colspan="2">A lot of text on 1 line</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>
            <label>Directory:</label>
        </td>
        <td colspan="2">
            <input id="directory" readonly="true" />
        </td>
    </tr>
</table>

http://jsfiddle.net/4fLL8md0/2/

如您所见，对于这种情况，您需要 3 个宽度分别为 20%、60% 和 20% 的单元格。如果您有更多的行、更多的单元格或想要以其他百分比划分行，您总是需要更改 table 结构。

Answer 3

您尝试实现设计的方式完全错误。有两种方法可以使用 colspan 或嵌套 table 来实现。

您可以尝试 Panter 给出的答案或尝试嵌套 table 这是最好的选择，因为它也更容易实现和维护。

table 的每一行指定了不同的宽度

Different widths being specified on each row of a table

html

css

html-table