| PHP | PHP 7.4 |
|---|---|
| CMS | Rhymix 2.0 |
다음과 같은 html이 있습니다.
표가 있고, 행은 1개, 열은 2개인 표입니다.
<table><tr>
<td>
a<br>b<br>c
</td>
<td>
<input id="Fld1" name="Fld1" type="text" maxlength="255" style="height:100%;">
</td>
</tr></table>
문제는 왼쪽 열은 총 3줄이 나오잖습니까?
오른쪽 열에 있는 'input'이 한 줄 높이만 나옵니다.
height 속성을 줬는데 왜 그럴까요?
어쨌든 원하는 건, 오른쪽 열의 'input'이 왼편 열의 높이 만큼 표시되기를 원하는 겁니다.
(왼편 열의 a, b, c 라는 텍스트는 동적으로 변경될 수 있습니다. 그 때에도 'input'의 크기가 변경되면 좋겠습니다.)
table,td{
height:100%;}
height를 100%를 한다 해도 자동으로 증가하지 못합니다.
이유인즉슨 부모 태그인 td 태그의 크기가 결정되지 않은 상태기 때문입니다.
어? 그 옆 태그 크기가 글자 3줄로 고정 아니냐? 할수 있지만 그건 옆줄이고 현재 input이 있는 줄 크기가 지정되지 않았기에 height:100%;의 효과가 없는 것입니다. 이건 abc가 들어가는 줄 td 태그에 height를 수동 지정해도 결과가 같은걸 보시면 아실수 있을겁니다.
제일 간단한 방법은 맨윗분 댓글처럼 display: flex 태그를 적용하는 것입니다. flex는 기본적으로 flexbox 레이아웃을 사용하겠다는 선언입니다. https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox 같이 구글에 flexbox 검색해보시면 자료는 많이 나오는데 기본적으로 기존 방식 대비 유동성이 높은 표현 방식이라 보시면 됩니다.
혹은 그 아랫분 댓글처럼 table, td 태그에 강제로 높이를 지정하셔도 됩니다. 다만 모든 table 태그에 적용시 문제가 될 수 있으니 해당하는 table만 적용할수 있게 class로 구분해서 적용하시는게 좋습니다. (table.classname, td.classname)
<table>
<tr style="display: flex;">
<td>
a<br>b<br>c
</td>
<td>
<input id="Fld1" name="Fld1" type="text" maxlength="255" style="height:100%;">
</td>
</tr>
</table>