4

動的ドロップダウン リストを持つテーブルがあります。

ドロップダウンの幅は、その内容によって異なります。

テーブルの列をドロップダウンの幅と同じにしたいと思います。

ドロップダウンのサイズよりも小さい幅を設定すると、IE はドロップダウンよりも列を大きくし、列のタイトルをラップしてドロップダウンの両側に空白を挿入するようです。

CSS で、列をコンテンツと同じサイズにする方法はありますか?

これは、現在の修正を含むサンプルの html テーブルです (kludge)。

<table id="mappingtable" width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <th width="80px">FixedWidthColumn</th>
    <th width="80%">ExpandingColumn</th>
    <th width="122px">&nbsp;</th>
    <th>DynamicColumn</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Text</td>
    <td align="center">Button</td>
    <td align="center">DropDownList</td>
  </tr>
</table>

問題はcssなしで存在します

拡張列から width="80%" を削除すると、動的列に空白が含まれます

動的列で width: auto を試し、固定幅に設定しましたが、どれもうまくいきません

4

3 に答える 3

1

必要なのは、幅が 100% で、幅が定義されていない 1 列のテーブルです。ドロップダウンのある列の幅が非常に小さい場合、ブラウザーは自動的に列全体をドロップダウンの幅に一致させます。

HTML は次のようになります。

<table width="100%" >
  <tr>
    <th width="80">FixedWidthColumn</th>
    <th>ExpandingColumn</th>
    <th width="122"> </th>
    <th width="10">DynamicColumn</th>
  </tr>
  <tr>
    <td align="center">1</td>
    <td>Text</td>
    <td align="center">Button</td>
    <td align="center">DropDownList</td>
  </tr>
</table>

以下のコメントへの回答として、検討できる解決策がいくつかあります。

次のように、少なくとも特定の幅といくつかの改行スペースがないオプションタグをドロップダウンリストに追加できます。

<option>Please select...&nbsp;&nbsp;&nbsp;&nbsp;</option>

次のように select タグに最小幅を指定できます。

<select style="min-width: 200px;" >
于 2009-06-19T18:02:19.523 に答える
0

この特定のテーブルについて、テーブル パラメーター内の css データを上書きしないのはなぜですか?

そのパラメーターが渡される場所 (または別の場所で解析される場所)。

于 2009-06-19T15:22:22.280 に答える
0

これがテーブルの仕組みです。幅が設定されていない 2 つの列があり、テーブルの幅が設定されている場合、残りの使用可能なスペースは 2 つの列に分配されます。

ExpandingColumn のコンテンツが残りの幅を埋めるのに十分な大きさである場合、テーブルから 100% 幅を削除すると問題が解決します。

于 2009-06-19T22:45:23.063 に答える