在表的每一行上指定不同的宽度

Question

任何人都知道为什么桌面上的每个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

任何简单的方法都不可能。您只能在行中使用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％的单元格。如果您有更多行，更多单元格或想要以其他百分比划分行，则始终需要更改表格结构。

Answer 2

表格单元格必须符合 - 否则它不会是表格！您可以使用colspan sorta 克服此限制。

Answer 3

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

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