html - セルの高さは、Webkit ブラウザーで無視されるものです

Question

tbody と thead heights で遊んでみましたが、他のブラウザーとは異なり、Webkit が期待どおりに動作しないことがわかりました。

実際にtd高さを設定しました。

これが私が話していることです

問題は、どのブラウザーが正しく動作するか、また、Webkit が正しくレンダリングされたとしても、Webkit 以外のブラウザーと同じようにアイテムをレンダリングするにはどうすればよいかということです。

Answer 1

内側のセルの高さがわかっている場合は、テーブルの後に疑似要素を挿入するだけです: http://dabblet.com/gist/4332648

ただし、その場合、パディングなどのより良い解決策があります:)

では、行数はわからないがテーブルの高さはわかっているとしましょう。何らかの方法でその場所を予約できる場合は、このテーブルを絶対位置に配置し、非常に高い疑似要素を挿入clipして、不要なスペースを削除するために使用できます: http://dabblet.com/gist/4332690。境界線が必要な場合は、別の疑似要素が役立ちます — http://dabblet.com/gist/4332702。

私は、あなたが望むものをエミュレートするためのハックだけがあり、他に理想的な解決策がないのではないかと心配しています.

Answer 2

TABLEとの両方の高さを設定しないでくださいTD。ONEを選択してください。

Answer 3

セルには、高さの代わりに最小高さを使用するか、その両方を使用してください。

table {
   border: 1px solid red;
   height: 200px;
   width: 400px;
}
thead  td {
   min-height: 10px;
}

tbody {

}

tbody td {
  background: pink;
  min-height: 10px;
}