[html/css] css로 간단하게 table에 1px 테두리 넣기

css로 table th,td 등에 테두리를 넣으려면 아래 코드처럼 넣어주시면 기본적으로 테두리가 생깁니다.

 

table th,td { border:1px solid #ddd; }

 

위에 코드는 순서대로 테두리 두께는 1px 테두리 선은 일반적인 선 테두리의 색상은 회색 개열로 넣으라는 뜻입니다.

하지만 아래 codepen을 보시면 문제가 있는걸 알수 있습니다.

 

See the Pen Untitled by lgtwins22 (@jyvujtky) on CodePen.

 

위에 코드만 넣으면 table 속성 cellpadding 때문에 테이블 사이 사이에 여백이 생겨나서 보기가 안좋습니다.

여백을 사라지게 하고 싶을땐 아래 코드를 넣어주시면 보시는것 처럼 여백이 사라집니다.

 

table { border-collapse: collapse; }

 

 

See the Pen Untitled by lgtwins22 (@jyvujtky) on CodePen.