티스토리 테이블에 가로 스크롤 구현하기

그동안 작성했던 포스팅중 테이블이 들어가 있는데 이것이 PC에서도 모바일에서도 모두 모양이 틀어져 보기가 불편했다.
검색을 해보니 쉽게 아래의 두가지를 적용함으로써 스크롤 테이블로 만들 수 있었다.

1. table의 style에 white-space: nowrap; 부분 추가

<table style="white-space: nowrap;">
 style부분을 추가한다.
<table>

2. table 태그 앞뒤로 div태그를 추가하여 감싼다

<div style="width: 100%; overflow: auto;">
<table>
...
</table>
</div>

* 위의 내용을 적용하여 가로 스크롤 되는 테이블
가로 스크롤바가 생기면서 단어들이 표의 각 셀들이 두줄로 나뉘지 않아 훨씬 보기 편하다.

제품명	형태	전체(Cm)			이너(Cm)			전실 L1 - L2	무게 (kg)	플라이 원단	난연 처리
		길이 (L1)	폭	높이	길이 (L2)	폭	높이
제드 7-II	굼벵이	610	345	220	220	330	?	390미만	26.9	150d P/O
코베아 고스트플러스	터널	630	315	205	240	280	185	390미만	16	40d N/R
폴라리스 타우르스 알파	굼벵이	605	354	215	220	330	195	385미만	24	150d P/O	O
지프 실베스터2	굼벵이	600	350	220	220	330	170	380미만	26.6	150d P/O	O
제드 x1x	굼벵이	600	350	225	220	320	?	380미만	25	150d P/O
코베아 네스트2	굼벵이	600	330	210	220	310	180	380미만	20	75d P/T	O
제드 제콧5 +M	굼벵이	610	330	200	270	330	180	340미만	18	75d P/T, 190t

 

* 스크롤 되지 않는 테이블의 예
스크롤 코드를 넣기 전의 테이블. 참 보기 불편하다. PC에서도 보기 불편하지만 모바일에서는 훨씬 더 보기가 안 좋다.

 

제품명	형태	전체(Cm)			이너(Cm)			전실 L1 - L2	무게 (kg)	플라이 원단	난연 처리
		길이 (L1)	폭	높이	길이 (L2)	폭	높이
제드 7-II	굼벵이	610	345	220	220	330	?	390미만	26.9	150d P/O
코베아 고스트플러스	터널	630	315	205	240	280	185	390미만	16	40d N/R
폴라리스 타우르스 알파	굼벵이	605	354	215	220	330	195	385미만	24	150d P/O	O
지프 실베스터2	굼벵이	600	350	220	220	330	170	380미만	26.6	150d P/O	O
제드 x1x	굼벵이	600	350	225	220	320	?	380미만	25	150d P/O
코베아 네스트2	굼벵이	600	330	210	220	310	180	380미만	20	75d P/T	O
제드 제콧5 +M	굼벵이	610	330	200	270	330	180	340미만	18	75d P/T, 190t

HTML 태그 참 어렵다~~
공부 많이 해야 겠다는 다짐을 다시 한번 !!