반응형
HTML 작업 중 css에서 th태그의 width를 지정해주어 테이블 특정 컬럼의 너비를 고정시켰는데, 윈도우 창 사이즈 조절시에는 컬럼의 사이즈가 줄어드는 이슈가 있었다.
기존 테이블의 형태는 다음과 같았는데 윈도우 창을 줄이면
이렇게 사이즈가 변경되는 이슈가 생겼다. 이 때 Company컬럼의 너비를 고정하기 위해서 width를 주고 table-layout을 fixed로 지정해주었지만 이슈가 해결되지는 않았다.
th 태그에 class를 주어서 css로 처리하면 되지 않을까 하고 시도했는데 그래도 줄어들었다.
열심히 구글링을 한 결과 min-width와 max-width를 주면 창 사이즈가 변해도 유지된다고 알게되었다.
.fixedCol {
width:250px;
min-width:250px;
max-width:250px;
}다음과 같이 fixedCol 클래스를 생성하고 너비를 지정해주었다.
전체코드
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.fixedCol {
width:250px;
min-width:250px;
max-width:250px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="fixedCol">Company</th>
<th class="fixedCol">Contact</th>
<th class="fixedCol">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
결과는 아래와 같이 윈도우 창 사이즈를 줄여도 각 컬럼들의 사이즈가 고정되며 overflow가 되므로 스크롤이 생성되는 것을 볼 수 있었다.
반응형
'Web > HTML' 카테고리의 다른 글
| [HTML] 폼 필수 입력 메시지 변경 방법(form required message customizing) (0) | 2021.08.19 |
|---|
댓글