Question

我正在尝试按照我想要的方式进行以下操作。我想让一个Input元素将其宽度更改为提供的单元格的宽度。这是代码：

<table style="margin-top:10px;width:80.5%;font-size:14px">
    <tr>
        <td style="text-align:left;width:5%">
            <span translate>CaseNumber</span>:
        </td>
        <td style="text-align:left;width:5%">
            <span>
                <input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
            </span>
        </td>
        <td style="text-align:left;width:2%">
            <span translate>Title</span>:
        </td>
        <td style="width:88%">
            <div style="width:100%">
                <input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
            </div>
        </td>
    </tr>
</table>

我希望最后一个单元格中的输入占据其所在单元格的所有宽度。除非我提供输入的宽度，否则它没有发生。

Answer 1

将width: 100%放在input元素本身上，而不是放在它周围的div上（事实上你可以完全摆脱div）。

演示：http://jsfiddle.net/1qda1jpx/2/

table {
    border: 1px solid blue;
}

td {
    border: 1px solid lightgray;
}

input {
    width: 100%;
}

<table style="margin-top:10px;width:80.5%;font-size:14px">
    <tr>
        <td style="text-align:left;width:5%">
            <span translate>CaseNumber</span>:
        </td>
        <td style="text-align:left;width:5%">
            <span>
                <input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
            </span>
        </td>
        <td style="text-align:left;width:2%">
            <span translate>Title</span>:
        </td>
        <td style="width:88%">
            <input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
        </td>
    </tr>
</table>

Answer 2

您需要为该输入元素设置宽度：100％。否则它不会发生。

输入表格单元格内的元素宽度

2 个答案: