1

考虑以下 jsFiddle - http://jsfiddle.net/mark69_fnd/rcCeG/17/

虽然它使用了 YUI，但代码应该很清楚：

YUI().use('node', function (Y){
    var td = Y.one('#replaceMe'),
        newTd = Y.Node.create('<td><input/></td>'),
        w = td.getDOMNode().getBoundingClientRect().width,
        inputNode = newTd.one('input');

    w -= parseFloat(td.getComputedStyle('paddingLeft')) || 0;
    w -= parseFloat(td.getComputedStyle('paddingRight')) || 0;
    w -= 2 * parseFloat(td.getComputedStyle('borderWidth')) || 0;

    newTd.setStyle('width', w + 'px');
    w -= 2 * parseFloat(inputNode.getComputedStyle('borderWidth')) || 0;
    inputNode.setStyle('width', w + 'px');

    td.replace(newTd);
});​

它所做的是将给定表格中的一个单元格替换为另一个包含输入框的单元格。

现在，我必须执行一些宽度计算才能让替换保留表格大小。特别困扰我的是，我必须明确设置输入的宽度，即使它在 CSS 中设置为 100%：

table, td, th {
    border: solid 1px black;
}

table td, table th {
    padding: 2px;
}

input {
    border: 1px solid #cbcbcb;
    background-color: #FFFEBB;
    width: 100%;
    height: 100%;
}

如果我不设置它，那么它看起来很丑 - 不尊重正确的填充，我不明白为什么。

请告诉我在保留表格大小的同时用另一个单元格替换一个单元格的正确方法。

4

3 回答 3

1

问题是表格单元格的宽度来自它的孩子的宽度。100% 的宽度可以很好地调整到它的孩子的宽度......如果作为 td 的孩子的输入决定了 td 的宽度，那么 100% 会做什么？它不会做任何事情......它会将输入保持在默认大小。

基本上，根据其内部内容调整的元素内的百分比宽度值将与其自然大小相关。还有一件事：父级的宽度将始终等于内部内容的相同自然大小。

您也可以使用浮点数看到这种行为：jsfiddle.net/joplomacedo/gBvn4/

我希望我已经说清楚了。我现在很着急，不能花时间清理或更好地构建答案。

于 2012-11-09T17:11:10.833 回答
0

为什么不一次明确地设置所有单元格的宽度和高度？：

table th, table td {
    width: 25px;
    height: 25px;
}

http://jsfiddle.net/pitaj/rcCeG/13/

于 2012-11-09T16:37:51.347 回答
0

尝试添加display: block;

input {
    border: 1px solid #cbcbcb;
    background-color: #FFFEBB;
    display: block;
    width: 100%;
    height: 100%;
}

您可能需要使用填充或浮动，但通常它应该可以工作。

于 2012-11-09T16:38:01.300 回答