web-dev-qa-db-ja.com

cssで最小幅と最大幅の両方を設定するテーブル列

列内で伸縮できるテーブルが欲しいのですが、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設定で実際にレンダリングされるものの表です。

enter image description here

csshtml5css3html-table
52
Luke McGregor

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

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

その場合、セルは指定された幅を下回らないように聞こえますが、実際には縮みます。
cに制限はありません。テーブルの幅を70ピクセルにすると、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>
89
Mr Lister