지난 포스팅에서 구글 블로그에 테이블을 넣는 것까지는 성공했습니다. 그러나 게시판 크기보다 넓은 테이블이 들어갈 때는 화면에 보이지 않는 테이블은 확인할 수 없었는데요, 이번에 가로 스크롤을 추가하면서 숨겨져 있는 테이블을 볼 수 있게 되었습니다.
PC에서 테이블 화면입니다.
가로 스크롤이 항상 보이게 되어있습니다.
휴대폰 화면입니다. 여기는 PC와 반대로 스크롤바가 숨겨져 있어 방문자가 이상하다고 생각할 수도 있겠습니다. 이런 자료를 많이 접한 방문자는 드래그하면 숨겨진 자료를 볼 수 있다고 알 수도 있을 텐데, 그렇지 않은 방문자는 이상하게 생각할 수도 있겠습니다.
이번에 스크롤바 코드 넣는 것은 처음 구글 블로그에 테이블을 넣을 때 찾았던 코드에 비하면 간단하게 구했습니다.
스크롤바만 생성하는 부분만 넣었습니다.
그리고 스크롤바 색상 변경은 잘 안되네요. 여기까지만 하겠습니다.
<!-- 구글 블로그 가로 스크롤 만들기 -->
<div style="text-align: center; overflow-x: auto;">
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
padding: 0px 20px;
margin: 0 auto; /* Center the table horizontally */
width: max-content; /* Make the table width dynamic based on content */
}
</style>
<!-- 구글 블로그 가로 스크롤 만들기 끝 -->
.tg 는 테이블 속성입니다.
<div style="text-align: center; overflow-x: auto;">
width: max-content; /* Make the table width dynamic based on content */
이 두 줄이 추가되었습니다.
나머지는 이전 포스팅을 확인해 보세요.
구글 블로그에 테이블을 넣는 과정까지, 그리고 문제가 생겼습니다