Table 요소 내 th 또는 td 에 최소 높이 지정하기

테이블을 만들었는데 th 태그 내에 들어가는 텍스트 길이가 제각각이다보니 또 안 예쁘게 나온다.

바로 이렇게

모든 행이 동일한 높이로 출력되게 하려고 tr에도 높이를 지정해보고, th나 th에도 높이를 지정해줘봤지만 소용없을 무....

 

헤매던 끝에 div를 이용해 높이를 주는 방법을 시도했더니 먹혔다.

<table>  
  <tr>
    <th>
       First 
       <br/>
       Row
    </th>
    <td>
      testing 1
    </td>
  </tr>
  <tr>
    <th>
       Second
       <br/>
       Row
    </th>
    <td>
       testing 2
    </td>
  </tr>
  <tr>
    <th>
      <div style="min-height:40px;">
         Third Row
      </div>
    </th>
    <td>
    </td>
  </tr>
</table>

 

24번 행처럼 th 태그 내에 div를 넣고

그 div에 min-height 속성을 지정해주면

 

이렇게 일정한 간격을 지닌 테이블이 나온다.