css - CSSでtbodyの最小の高さを定義する方法

Question

CSSでtbodyの最小の高さを設定したいのですが、<tr><td></td></tr>tbodyにない場合でも、コードは次のとおりです。

tbody{
  height: 500px;
  min-height:500px;
}

しかし、それは機能しません。だから私はこれを達成するために何をすべきですか？

score 7 · Accepted Answer

なぜあなたはこれをしたいのですか？

最小の高さと高さはブロックレベルの要素に適用され、テーブルはブロックレベルの要素ではありません。テーブルをdiv内にラップし（たとえばdiv.table-wrap）、そのdivに最小の高さを適用します。

テーブルのレイアウトが重要ではない場合はdisplay:block、tbodyのCSSに追加するだけです。

score 4 · Accepted Answer

このデモがあなたのために働くことを願っています...

Css：

  tbody{
     height: auto;
     min-height:200px;
     display:block
    }

score 2 · Accepted Answer

<tbody>他のHTML要素（ユーザーコンテンツ）を挿入できなかったため、の最小の高さが必要でした。修正を見つけました。

高さは空のテーブルでは機能しますが、Chrome（59）で空のテーブルに空のtbodyがある場合は機能しません。これは、FirefoxとEgdeで機能します。また、隠された他のケースで問題が発生しました。すべてのケースについては、 JSFiddle<tr>を参照してください。

CSS：

.test {
  border: 1px solid red;
  height: 60px;
}

HTML：

Empty table:
<table class=test>

</table>

Empty tbody:
<table class=test>
  <tbody></tbody>
</table>

Chrome 59：

Edge（14）、IE（11）、Firefox（54）：

これを修正しました：

tbody:before {
  content: ''/* needed for chrome*/
}

更新されたJSFiddleを参照してください

score 0 · Accepted Answer

私はこれでうまくいくと思います、

table{height:500px !important;}

これ!importantで自発的になり、他の属性によって簡単に上書きされます。

tbodyにはheightプロパティはありません。

CSSの標準化に従って、「align」、「char」、「charoff」、「valign」の4つのプロパティのみを保持します。

また、これは、残りのスペースに追加された同じサイズとセル間隔のセルで機能します。

tbody{
  height:500px;
  display:block; 
}

試して返信してください、これでうまくいくことを願っています:)

score 0 · Accepted Answer

tbodyはmin-heightを持つことはできませんが、datatableの高さは機能するため、代わりにフォローしてみてください

tbody{
    height:500px;
}

score -1 · Accepted Answer

IE 5または6を使用している可能性があります。代わりに高さだけを使用しないのはなぜですか？同じ要素に高さと最小の高さを設定しても意味がないため、最小の高さを削除してみてください。取得するのは固定の高さであり、最小の高さではないためです。

score -1 · Accepted Answer

-1

display：blockを追加する必要があります。それも。

于 2013-03-20T09:11:05.790 に答える

7 に答える 7