[html 버그] safari, chrome 등 모바일에서 table 너비 인식(width) 문제 (<caption> 관련)

pc에서는 문제가 없지만 모바일에서의 table 태그에 작성한 내용들이

내가 원하는 width값을 먹지 못하고 틀어지는 경우가 종종 있다.

 

<colgroup>과 <col>태그를 사용해서 width 값을 줘도,

css를 통해 width값을 아무리 줘도 내가 원하는 값을 출력하지 못하는 경우가 있는데

 

이 경우 caption 태그 사용에 대해 살펴봐야한다.

 

1. table태그 width값 적용 문제 (with. caption태그)

<style>
  table{table-layout:fixed; border-collapse:collapse; border-spacing:0;}
  table caption{position:absolute; width:1px; height:1px; overflow:hidden; font-size:0;}
  table thead th{background:#999; color:#fff;}
  table th, td{height:30px; text-align:center;}
</style>

<table>
  <caption>학생별 과목 평균점수</caption>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%;">
    <col style="width:30%;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">이름</th>
      <th scope="col">과목</th>
      <th scope="col">평균점수</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>김철수</td>
      <td>영어</td>
      <td>80점</td>
    </tr>
    <tr>
      <td>김세미</td>
      <td>수학</td>
      <td>60점</td>
    </tr>
    <tr>
      <td>김티스토리</td>
      <td>체육</td>
      <td>40점</td>
    </tr>
    <tr>
      <td>철수세미</td>
      <td>음악</td>
      <td>100점</td>
    </tr>
  </tbody>
</table>

위와 같이 table을 만들었을 때 pc에서는 내가 원하는 모양대로 노출이 되지만

모바일 safari 혹은 chrome에서

위와 같은 모습으로 너비 값을 인식하지 못하고 틀어져 노출이 되는 경우가 있을 것이다.

위와 같은 현상이 생길 경우 가장 먼저 확인해야할 것이 caption 태그이다.

 

2. table 너비 인식 문제 해결 (caption: absolute)

caption태그는 테이블의 접근성 향상을 위해 해당 table이 어떤 내용들을 담고 있는지

요약하여 설명해주는 텍스트를 담고 있다. 그래서 caption을 쓰는 경우가 많은데

2021.01.27 - [Frontend/HTML] - [html 태그] caption 태그 (table 태그, summary 속성)

 

위 1번에서 사용한 css를 보면 caption태그를 html 구조상에만 남겨두고 실제 페이지 노출시 안보이게 하기 위해

position:absolute를 사용하여 숨기는 내용의 css를 사용했는데

 

caption 태그에 absolute가 들어가게 되면 모바일 safari, chrome 등에서 table의 너비 자체를 인식 못하는 버그가 있기 때문에 caption태그를 숨기기 위해서는 absolute를 사용해서 띄워서 숨기는 것이 아닌 다른 방식으로 caption태그를 숨겨줘야한다.

<style>
  table{table-layout:fixed; border-collapse:collapse; border-spacing:0;}
  table caption{font-size:0; text-indent:-9999px;}
  table thead th{background:#999; color:#fff;}
  table th, td{height:30px; text-align:center;}
</style>

caption에 해당하는 css를 font-size, text-indent를 사용해서 숨겨주는 방식을 사용해서 absolute를 사용하지 않는다면

내가 원하는 위와 같은 table의 너비 값을 얻을 수 있다.