아무래도 7note입니다. 테이블의 요소를 강제로 세로로 정렬하는 방법 설명

table요소를 사용했을 경우, PC표시때는 좋지만 스마트폰이라면 너무 옆에 긴 표조라면 너무 작아지거나, 문자가 들어가지 않고 세로가 되어 버리거나 합니다.


※문자가 들어가지 않고 세로로 되어 버린 예

이를 해결하기 위해 스마트폰 때만 가로줄 요소를 세로로 늘어놓고 대책을 세웁니다.

출처

index.html

<table>
  <tr>
    <td>りんご</td>
    <td>ごりら</td>
    <td>らっぱ</td>
    <td>ぱんつ</td>
  </tr>
</table>

style.css

table,td,th {
  border-collapse: collapse;  /* 罫線を引くための指定 */
}
td,th {
  border:1px solid #333;  /* 線を引く */
  padding: 10px 30px;     /* 余白を指定 */
}
@media screen and (max-width: 768px) {
  table,tbody,tr,td,th {
    width: 100%;    /* 幅を100%にする */
    display: block; /* ブロック要素にする */
  }
}

해설

table은 본래 <tr> 1개로 1행입니다만, 자식 요소가 되는 <td> <th>

요약

반응형 대응으로 사용하는 기술계는 어쩐지 있어도 좋으니까요.
table은 사용 빈도가 거기까지 높지는 않지만, 그래도 아직도 이용되는 장면이 많기 때문에 반응형 사이트에서도 사용할 수 있도록 테크닉은 기억해 두면 좋을지도 모릅니다.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임