1

私は表形式のレイアウトを作成していますが、本当に必要なものは次のとおりです。

  • 可変幅の 2 列
  • 列の幅が同じ
  • 列が必要以上に広くない

両方の列を「幅：50％」に設定すると、「テーブルレイアウト：固定」でこれを達成できることがわかりました。次に例を示します。

CSS:

    .mytable {
      border-collapse: collapse;
      table-layout: fixed;
    }
    .fifty {
      width: 50%;
    }

HTML:

    <table class="mytable" border=1>
        <tr>
            <td class="fifty">hello</td>
            <td class="fifty">x</td>
        </tr>
        <tr>
            <td class="fifty">a</td>
            <td class="fifty">longer</td>
        </tr>

        <tr>
            <td class="fifty">reallyreallylong</td>
            <td class="fifty">medium</td>
        </tr>
    </table>

これはまさに私が望んでいるものであり、このテーブルが別のテーブル内に表示されたときにすべてが窓の外に出てしまうことを除いて、私は満足しています. その場合、すべての列が可能な最小サイズに縮小されます (少なくとも私のバージョンの Chrome では)。

ここに、私のジレンマを示す jsFiddle があります: http://jsfiddle.net/KTkZm/

誰かがこれに光を当てることができますか?テーブルの外側と同じように内側のテーブルをレンダリングする方法を見つけてください。ありがとう！

4

1 に答える 1

0

以下のjsfiddleリンクを確認してください。正常に動作しています。

http://jsfiddle.net/KTkZm/14/

于 2013-07-27T05:28:40.003 に答える