Ghost 표(Table) 너비가 이상할 때 해결하는 팁
Ghost 블로그 에디터에서 테이블 열 너비가 자동으로 설정되어 레이아웃이 깨질 때, HTML과 CSS를 활용하여 깔끔하게 간격을 조절하고 고정하는 실전 방법을 소개합니다.
Ghost 블로그 테이블 열 너비 조절 방법
네, <col> 태그에 style 속성으로 너비를 지정하면 됩니다!
수정된 코드
<table style="width: 100%; table-layout: fixed;">
<colgroup>
<col style="width: 8%;">
<col style="width: 22%;">
<col style="width: 70%;">
</colgroup>
<thead>
<tr>
<th>time</th>
<th>word</th>
<th>explain</th>
</tr>
</thead>
<tbody>
<!-- 나머지 내용 동일 -->
</tbody>
</table>
주요 변경점
| 변경 위치 | 추가 내용 | 설명 |
|---|---|---|
<table> |
style="width: 100%; table-layout: fixed;" |
테이블 전체 너비 고정 |
첫 번째 <col> |
style="width: 8%;" |
time 열 (좁게) |
두 번째 <col> |
style="width: 22%;" |
word 열 (중간) |
세 번째 <col> |
style="width: 70%;" |
explain 열 (넓게) |
다른 방법들
1. 픽셀(px) 단위 사용
<col style="width: 60px;">
<col style="width: 180px;">
<col style="width: auto;"> <!-- 나머지 공간 자동 채움 -->
2. <th>에 직접 지정
<th style="width: 8%;">time</th>
<th style="width: 22%;">word</th>
<th style="width: 70%;">explain</th>
💡 팁
table-layout: fixed→ 지정한 너비가 정확히 적용됨- 퍼센트(%) → 반응형에 유리
- 픽셀(px) → 정확한 크기 필요시 사용
- 합계가 100%가 되도록 설정하는 것이 좋습니다
