아이폰 테이블 깨짐 현상
본문
table td 에 min-width (200px)도 줬는데 테이블이 깨집니다...
<table border="1" summary="">
<caption>공지사항 목록</caption>
<tbody class="xans-element- xans-board xans-board-list-1 xans-board-list xans-board-1"><!--
$count = 4
$main_list = yes
$subject_cut = 25
$main_list_reply_view = no
--><tr class="xans-record-">
<td class="title">
<a href="/board/free/read.html?no=34&board_no=1">THE CLASSIC PILATES SHOWR</a> <img src="http://img.echosting.cafe24.com/design/skin/admin/ko_KR/ico_attach2.gif" alt="파일첨부" class="ec-common-rwd-image"></td>
<td class="date ">22.04.25</td>
</tr>
<tr class="xans-record-">
<td class="title">
<a href="/board/free/read.html?no=25&board_no=1">Retro Classic 사전 예약 이벤트</a> <img src="http://img.echosting.cafe24.com/design/skin/admin/ko_KR/ico_attach2.gif" alt="파일첨부" class="ec-common-rwd-image"></td>
<td class="date ">22.04.19</td>
</tr>
<tr class="xans-record-">
<td class="title">
<a href="/board/free/read.html?no=23&board_no=1">클래식 필라테스 스튜디오 창업 컨설팅</a> <img src="http://img.echosting.cafe24.com/design/skin/admin/ko_KR/ico_attach2.gif" alt="파일첨부" class="ec-common-rwd-image"></td>
<td class="date ">22.04.18</td>
</tr>
</tbody>
</table>
<style>
.title {width:calc(100% - 50px);min-width:200px;}
</style>
근데 어디서 문제가 생긴건지 확인할 방법이 없네요.
사파리 문제인가 싶어서 아이폰에서 네이버 앱으로 확인했는데도 깨지네요 ㅠㅠ
왜 이러는지 아시는 분 있을까요?
* PC로 아이폰 화면을 테스트 할 수 있는 방법이 있을까요?
답변 1
크롬으로 페이지를 여신 후 소스보기 누르신 뒤에 모바일환경으로 보는 방법이 있습니다.
현재 class 에 어떤 style이 들어가 있는지 모르실 경우 소스보기로 table td 들을 찍어보시면
해당 css가 나타납니다.
css를 확인해야될듯합니다.
title 에 100% - 50px 이 있으실텐데 그전에 table의 width 조건을 확인해보세요
아무조건도 없는 상태에서 table의 width는 100%의 영역을 가지고 있지는 않습니다.
table위의 div에 width 가 지정되어있고 table width 100%이 적용되어있습니다.
구글링해보니까 <td nowrap>...</td>이라고 적용하면 줄바꿈이 되지 않는다고 해서 현재 그걸로 잡아두니 아이폰에서 정상적으로 나오네요. 답변 감사드립니다!
nowrap 은 생각도 못했었네용
잘 해결하셨다니 앞으로도 멋진 홈페이지 만드세용~
답변을 작성하시기 전에 로그인 해주세요.
