CSS에서 테이블 행 높이를 지정하고 모든 행을 다른 행 아래에 배치하는 방법은 무엇입니까? I는 열 요소의 높이가 문제가</p> <p><a href="https://i.stack.imgur.com/XNXQOm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNXQOm.png" alt="enter image description here"></a></p> <p>

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는 7 분할 테이블 (100 %)의 높이로 할 (및 I 계산치 (100 %를/7)), 작동하지 않습니다. 화면에서 보듯이 267px이며 훨씬 더 작아야합니다. 이 행을 정상 높이로 테이블의 맨 위에서 시작하기를 원합니다 (테이블에 블록 요소의 높이가 100 %이기 때문에 아래에 두 개의 행과 다른 빈 공간이 있어야합니다). 나는 동적으로 행을 생성하고 있으며 모든 테이블을 채울 것입니다 (그래서 나는 같은 높이를 가지며 모든 테이블을 채울 7 행을 가질 것입니다). 내가 실수 한 곳? 당신의 도움을 주셔서 감사합니다! 두 행

원하는 출력 :

원하는 출력 일곱 행 :

Answer 1

당신은 단지 height을 적용하려면 행에 display 속성을 정의해야합니다. 나는 당신의 설명이 도움이 될 최종 원하는 출력의 스크린 샷 같은 느낌 https://jsfiddle.net/dieguezz/q2j6me6h/

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