1

このフィドルをチェックしてください。

これは の基本的な CSS ですtd:

td {
    height: 30px;
    border: 1px solid grey;
    background-color: rgb(141, 176, 248);
}

30px の画像を含むセルが 1 つあります。それでも、そのセルの幅は 600px です。誰かが理由を理解していますか？

4

3 に答える 3

1

それはコンテンツを持っているtdこととコンテンツをtd持っていないことと関係があります。

Whenever your td doesn't have any fixed width

テーブルにはがwidth:100%あり、ほとんどのtdにはコンテンツがないため、無視できる幅に揃えられます。ただし、tdのいずれかにコンテンツを指定するとすぐに、その列全体がそれに応じて拡張され、テーブルの幅全体に対応します。

それをテストするには、他の単語を書くだけでtd、列全体が展開されます。

あなたがすべきことは、このデフォルトの拡張を制限するためにあなたのTDに幅を提供することです。

.ui-droppable
{
   width:50px;
}
于 2013-03-07T14:18:08.427 に答える
0

<td>要素に幅を設定せず、幅を設定していない場合<table>（つまり、デフォルトで100％）、- <td>sは自動的に幅全体を埋めます。あなたの場合、それは<td>拡大するものです。

cssファイルに幅を設定すると、問題が修正されます。

td { width:30px; }

もちろん、テーブルの幅は、すべての列の合計に設定する必要があります。または、テーブルの幅をpx /％で設定し、列の幅を％で設定することもできます。または、javascript / jQueryを使用して、列の幅をその中の画像の幅に適合させることができます。

于 2013-03-07T14:10:55.280 に答える
0

幅/高さを 30px に設定し、境界線を 1px に設定します。画像の幅も 30px です。残念ながら、境界線の幅は幅に含める必要があります。幅を次のように設定する必要があります30+2*1px: fiddle

于 2013-03-07T13:59:31.287 に答える