ブラウザはここ異なる

Question

複数TBODYの高さをレンダリングする複数TBODY要素 https://jsfiddle.net/aoLbuafx/

HTML

<table> 
    <tbody class="tbody1"> 
    <tr> 
     <td>Eka</td> 
     <td>Toka</td> 
     <td>Kolmas</td> 
    </tr> 
    </tbody> 

    <tbody class="tbody2"> 
    <tr> 
     <td>Sisältö</td> 
     <td>Sisältö</td> 
     <td>Sisältö</td> 
    </tr> 
     <tr> 
     <td>Sisältö</td> 
     <td>Sisältö</td> 
     <td>Sisältö</td> 
    </tr> 
     <tr> 
     <td>Sisältö</td> 
     <td>Sisältö</td> 
     <td>Sisältö</td> 
    </tr> 
    </tbody> 

    <tbody class="tbody3"> 
    <tr> 
     <td>Eka</td> 
     <td>Toka</td> 
     <td>Kolmas</td> 
    </tr> 
    </tbody> 
</table> 

CSS

table { 
    height: 500px; 
} 

.tbody1 { 
    background-color: red; 
} 

.tbody2 { 
    background-color: blue; 
} 

.tbody3 { 
    background-color: green; 
} 

端とテーブル要素を含む、一例であり、結果はブラウザがこのテーブルをレンダリングします異なっている。 Firefoxはtbody要素間の合計高さを均等に共有しますが、Chromeは最初のtbodyを使用して空き領域を埋めることを好みます。

される固定テーブルの高さを維持しながら、TBODY要素間の高さを共有し、Firefoxはないとしてクロムがテーブルをレンダリングを支援することは可能でしょうか？

追記：この場合にはChromeが1と利用可能なスペースを埋めるためだけTBODY要素を好むので、tfoot要素にthead要素に最初のtbodyと最後のTBODYを変更するには、少しのに役立ちます。それでも、それは私が望むものではありません。

Answer 1

これは面白い動作です。 Javascriptを使用せずに子を数え、それに応じて高さを設定することなく、これはフレックスボックスで行うことができます（多くのことができます）。ここ はHTMLです：

<div class="table"> 

    <div class="wrap tbody1"> 
     <div class="cell">Eka</div> 
     <div class="cell">Toka</div> 
     <div class="cell">Kolmas</div> 
    </div> 

    <div class="wrap tbody2"> 
     <div class="cell">Sisältö</div> 
     <div class="cell">Sisältö</div> 
     <div class="cell">Sisältö</div> 
    </div> 

    <div class="wrap tbody2"> 
     <div class="cell">Sisältö</div> 
     <div class="cell">Sisältö</div> 
     <div class="cell">Sisältö</div> 
    </div> 

    <div class="wrap tbody2"> 
     <div class="cell">Sisältö</div> 
     <div class="cell">Sisältö</div> 
     <div class="cell">Sisältö</div> 
    </div> 

    <div class="wrap tbody3"> 
     <div class="cell">Eka</div> 
     <div class="cell">Toka</div> 
     <div class="cell">Kolmas</div> 
    </div> 
</div> 

とCSS：

.wrap { 
    display: flex; 
    flex: 1; 
    justify-content: space-between; 
} 

.cell { 
    display: flex; 
    width: 100%; 
    padding: 5px; 
} 

.table { 
    height: 500px; 
    display: flex; 
    flex-direction: column; 
} 

は、ここではいくつかの追加のスタイルとJSFiddleです。高さを調整できるflexboxのプロパティは、flex:1（.wrap）です。