4

divはい、これは古き良き内部についてのもう1つの質問ですtdが、スクリプトはありません。

tdの幅はピクセルで定義されます。

div（およびその内部入力）全体を埋めたいtd。Chromeで動作させましたが、FirefoxとIE9では失敗しました。それはそこに完全な混乱です。（IE6-8は気にしません）

これが私がテストしているスニペットです：http：//jsfiddle.net/K5D9z/37/。これに対する一般的な解決策はありますか？

編集

以前は指定しませんでしたが、一部のテーブルセルのコンテンツの高さが増加し、一部の行が拡張されることを期待しています。IEおよびFFでは、height: 100%要素は常にcssで指定されたコンテナの初期の高さを持つことを意味します：http：//jsfiddle.net/K5D9z/51/。すべての回答にこの問題があります。

アップデート

コメントで指摘されているように、純粋なcssソリューションはないようです。そこで、計算された高さに応じて、styleすべての属性に高さを設定するスクリプトを使用しました：http: //jsfiddle.net/K5D9z/54/。td

4

2 に答える 2

1

このようなものはどうですか：

CSS：

table
{
    border-collapse:collapse;
}

td
{
    padding:0;
    border: 1px Solid gray;
    height: 120px;
    width: 100px;
}

.test-row 
{
    background-color: red;
}

.test-cell div, .test-cell input
{
    height:100%;
    width:auto;
    background-color: green;
}

デモ：http： //jsfiddle.net/K5D9z/47/

于 2012-12-25T21:21:58.353 に答える
1

position:absoluteから削除する必要があります.test-cell div, .test-cell input。これによりinput、コンテンツの通常のフローから削除されるため、td本来の場所にとどまりません。これに加えてheight、widthからautoへの変更により、100%探しているソリューションが得られるはずです。

.test-cell div, .test-cell input{
  display: block;
  /* position: absolute; Don't use this style */
  height:100%;
  width: 100%;
  /* Don't need these, because it goes along with position absolute
     top:0;
     left:0;
     bottom:0;
     right:0;
  */
  background-color: green;
}

フィドル

于 2012-12-27T02:12:50.070 に答える