ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Table  요소 내 th 또는 td 에 최소 높이 지정하기
    개발/HTML & CSS 2019. 7. 21. 15:19

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

    바로 이렇게

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

     

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <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>
    cs

     

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

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

     

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

    댓글

Designed by Tistory.