표 작성 html 팁 | 스크롤과 캡션 넓이

테이블 내용을 깔끔하게 주석 처리하기 위해서는 테이블 넓이와 일치하는 캡션(caption)의 필요성이 절대적이다. 구글의 막강하고 훌륭한 시트 삽입으로 훌륭한 표 문서를 작성할 수 있지만, 아래와 같이 독자적인 문서는, 구글의 또 다른 장점인 html 편집기로 표(table)를 만들 수 있다. 간과하기 쉬운 표 만들기 팁을 비망록 차원에서 포스팅한다.

표 스크롤(가로)

<div style="margin:auto; overflow: auto; width: 100%;">
<table style="margin-bottom: 20px; white-space: nowrap;">

스크롤바 색상

div::-webkit-scrollbar-track
{
  border-radius: 100px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }

스크롤바 숨기기

div::-webkit-scrollbar{
  display:none;
  }

표에 변수가 지정되면 위처럼 'highlight'도 표로 인식되어 줄이 그어진다.

캡션과 테이블 넓이 일치

테이블에 white-space: nowrap/pre;가 지정되면 성립되지 않는다.

선샤인 GX 프로그램

빨간색 배경의 종목은 30분간 진행되며, 나머지는 50분간 실행됩니다.

	에어로빅			라인댄스
	스텝박스			폼롤러
	근력운동			케틀벨
	요가			스피닝
시간	월	화	수	목	금
08:40
10:40
19:00
20:00

의 관련글