1

テーブルに 'table-layout: fixed' CSS プロパティが設定されていると、テーブルの列が重なってしまうという問題が少しあります。

左側の列はレスポンシブで、最小幅が設定されています。右側の列は幅が固定されており、右に浮いています。ブラウザーのサイズが変更されると、最小幅を無視して、右の列が左の列に重なり始めます。

「table-layout: fixed」を取り除くと (デフォルトで auto になります)、これは起こりません。しかし、IE7 などの古いブラウザーでは、IE8 や最新のブラウザーとは異なり、ページがうまく表示されないため、これは望ましくありません。

問題を示すために、基本的な例 (非常に簡素化されたもの) をセットアップしました。以下のリンクをご覧ください。

http://jsfiddle.net/hGzQu/

どんな洞察も大歓迎です。

4

1 に答える 1

1

col要素と を一緒に使用して、 とtable-layout:fixedの複雑さを回避しfloatますmin-width。

<table>
  <colgroup>
    <col width="0*"><!--min-width equivalent-->
    <col width="30"><!--fixed width column-->
  </colgroup>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>
于 2012-09-11T05:29:45.840 に答える