CSSでテーブル行の高さを割り当て、すべての行を上から順に配置する方法はありますか？

Question

.block { 
 
    width: 445px; 
 
    height: 544px; 
 
    border-bottom: 1px solid rgba(24, 24, 28, 0.45); 
 
} 
 

 
.table { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-spacing: 3px; 
 
    border-collapse: separate; 
 
} 
 

 
.row { 
 
    height: calc(100%/7); 
 
    width: 100%; 
 
} 
 

 
.cell { 
 
    width: calc(100%/7); 
 
    height: auto; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
}

<div class="block"> 
 
    <table class="table"> 
 
    <tr class="row"> 
 
     <td class="cell">A</td> 
 
     <td class="cell">B</td> 
 
     <td class="cell">C</td> 
 
     <td class="cell">D</td> 
 
     <td class="cell">E</td> 
 
     <td class="cell">F</td> 
 
     <td class="cell">G</td> 
 
    </tr> 
 
    <tr class="row"> 
 
     <td class="cell">1</td> 
 
     <td class="cell">2</td> 
 
     <td class="cell">3</td> 
 
     <td class="cell">4</td> 
 
     <td class="cell">5</td> 
 
     <td class="cell">6</td> 
 
     <td class="cell">7</td> 
 
    </tr> 
 
    </table> 
 
</div>

Iは、行要素の高さに問題がある - 私はそれがテーブルの高さになりたい（100％）を7で割った値を（及びIは、CALC（100％を有します/ 7））、動作しません。あなたが画面に表示されているように、それは267pxであり、はるかに少ないはずです。この行は、テーブルの上部に通常の高さで始まります（テーブルの高さがブロック要素の100％であるため、2行、1つは下に、もう1つは空白スペースが多くなければなりません）。私は行を動的に作成しており、すべてのテーブルを塗りつぶします（したがって、同じ高さとすべてのテーブルを埋める7つの行があります）。私はどこでミスをしましたか？ご協力いただきありがとうございます！ 2行の

所望の出力：

所望の出力7行を持つ：

Answer 1

は、あなただけのheightを有効にするために、行にdisplayプロパティを定義する必要があります。

この例を参照してください：私は最終的な所望の出力のスクリーンショットのように感じるhttps://jsfiddle.net/dieguezz/q2j6me6h/

.row { 
    height: calc(100%/7); 
    width: 100%; 
    display: flex; 
    align-items: center; 
}