javascript - 如何在保持表格大小的同时用另一个单元格替换表格单元格

Question

考虑以下 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%;
}

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

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

Answer 1

问题是表格单元格的宽度来自于它的子元素的宽度。宽度的 100% 可以很好地适应其子项的宽度...如果作为 td 的子项的输入确定了 td 的宽度，那么 100% 会做什么？它什么都不做...它会将输入保持在默认大小。

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

您也可以通过 float 看到这种行为:jsfiddle.net/joplomacedo/gBvn4/

我希望我已经说清楚了。我现在很匆忙，无法花时间清理或更好地构建答案。