Question

我有一个表，其中有几个元素包含输入元素。我为输入元素设置了以下属性。

table input{
    width:inherit;
    margin:1px;
    overflow:hidden;
    }

现在我想要单元格大小来确定输入元素大小，因此确定了inherit属性。但是因为我对它们设置了边距，所以它们会从细胞中弹出一点点。所以我添加了overflow：hidden属性，但这没有帮助。

我做错了什么？

编辑：已添加代码

    <div>
    <form>
    <table>
    <tr>
        <th class="tinycolumn">S.no</th>
        <th>Part Name</th>
        <th>Part number</th>
        <th class="tinycolumn">Qty</th>
        <th>New/Repair</th>
        <th>MRP</th>
        <th>Denting/Fitting</th>
        <th>Painting</th>
        <th></th>
    </tr>
    <tr>
        <td>1.</td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="number" min="0"></td>
        <td><select><option value="new">New</option><option value="repair">Repair</option></select></td>
        <td><input type="text"></td>
        <td><input type="tel"></td>
        <td><input type="tel"></td>    
        <td><button>Delete</button></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><button>Add</button></td>
    </tr>
</table>
<input type="submit">
</form>

     </div>

支持CSS

#estimatetable{
display:inline-block;
width:80%;
margin:1em auto 1em auto;
overflow:hidden;
}
#estimatetable form{
width:auto;
}
#estimatetable form table{
text-align:center;
width:100%;
}
#estimatetable tr{
min-height:3em;
}
#estimatetable form table tr td, #estimatetable form table tr th{
border:1px solid rgb(0,0,0);
max-width:2em;
padding:1px;
}
#estimatetable input, #estimatetable select{
width:inherit;
margin:1px;
overflow:hidden;
}
#estimatetable button{
width:100%;
}
#estimatetable .tinycolumn{
max-width:.5em;
}

Answer 1

您的CSS说：输入继承了父级的width。

在常规框模型中，边框会添加到width。

使用box-sizing:border-box;，border和padding将包含在元素的总宽度中。

您的CSS可以通过以下方式修复：

table input{
    width:inherit;
    box-sizing:border-box; /* add vendor prefix or a script to do so if needed */
    }

如果您仍希望使用margin:1px;，则应将其转换为padding:1px;父元素（td），并将其应用于box-sizing属性。< / p>

<强> DEMO

表格单元格内的输入元素 - 不遵循overflow：hidden属性

1 个答案: