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% は何をしますか? 何もしません...入力をデフォルトのサイズに保ちます。

基本的に、要素の内部コンテンツに合わせて調整される要素内のパーセンテージ幅の値は、自然なサイズに相対的になります。もう 1 つ: 親の幅は常に、内部コンテンツの自然なサイズと同じになります。

この動作はフロートでも確認できます: 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 に答える