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％会做什么？它不会做什么......它会保持输入的默认大小。

基本上，调整到内部内容的元素内部的百分比宽度值将相对于它们的自然大小。另一件事：父母的宽度总是等于内在内容的相同自然尺寸。

您也可以使用浮点数查看此行为：jsfiddle.net/joplomacedo/gBvn4 /

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

Answer 2

为什么不一次只显式设置所有单元格的宽度和高度？：

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

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

Answer 3

尝试添加display: block;

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

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

如何在保留表大小的同时将表格单元替换为另一个单元格

3 个答案: