66

列が伸びるテーブルが欲しいのですが、css の最小幅と最大幅に少し問題があります。

また、これがどのように機能するかについて、いくつかの矛盾する答えがあるようです。

私は次のことをしたいと思います

table{
   width:100%;
}
.a, .b, .c
{
    background-color: red;
}
.a
{
    min-width: 10px;
    max-width: 20px;
}
.b
{
    min-width: 40px;
    max-width: 45px;
}
.c
{
}

<table>
    <tr>
        <td class="a">A</td>
        <td class="b">B</td>
        <td class="c">C</td>
    </tr>
</table>

JavaScript を使用せずにこれを達成する方法はありますか (つまり、テーブルを使用して列を制限して引き伸ばします)。

以下は、いくつかの異なる css 設定で実際にレンダリングされるものの表です。

ここに画像の説明を入力

4

1 に答える 1

111

テーブルの動作は異なります。時には直感に反する。

解決策は、width代わりに表のセルで使用することですmax-width。

その場合、セルは指定された幅以下に縮小されないように聞こえるかもしれませんが、実際には縮小されます。
c に制限はありません。表の幅を 70px にすると、a、b、c の幅はそれぞれ 16、42、12 ピクセルになります。
表の幅が 400 ピクセルの場合、上記のグリッドで予想されるように動作します。
テーブルのサイズが小さすぎる (a.min+b.min+ C の内容よりも小さい) 場合にのみ失敗します。その場合、テーブル自体が指定よりも広くなります。

フィドルに基づいてスニペットを作成しました。このスニペットでは、すべての境界線とパディング、および境界線の間隔を削除したため、幅をより正確に測定できます。

table {
  width: 70px;
}

table, tbody, tr, td {
  margin: 0;
  padding: 0;
  border: 0;
  border-spacing: 0;
}

.a, .c {
  background-color: red;
}

.b {
  background-color: #F77;
}

.a {
  min-width: 10px;
  width: 20px;
  max-width: 20px;
}

.b {
  min-width: 40px;
  width: 45px;
  max-width: 45px;
}

.c {}
<table>
  <tr>
    <td class="a">A</td>
    <td class="b">B</td>
    <td class="c">C</td>
  </tr>
</table>

于 2013-08-22T08:30:35.710 に答える