[css] 테이블 테두리 한 줄로 만들어 보자

---

안녕하세요. 개자이너 씸플레이입니다.

테이블에 보더를 넣으면 한 줄이 아니라 두 줄로 보일 겁니다.

 

테두리가 두 줄인 테이블

위의 이미지처럼 안쪽과 바깥쪽 테두리가 따로 생기는 경우입니다. 여기서 선을 한 줄로 만들어보겠습니다.

---

1. 테이블에 테두리 넣기

 

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

일단은 두 줄이 생겨도 테두리를 넣어주도록 하겠습니다. 테이블 전체와 th, td 모두 넣어줍니다. 

 

320x100

---

2. border-collapse : collapse

 

테이블에 속성을 하나 추가해줍니다. border-collapse라는 속성인데 테두리 간격을 설정하는 속성입니다. 여기에 값을 collapse라고 넣어주시면 인접한 테두리는 겹쳐서 나옵니다. 즉, 테두리가 한 줄인 표를 만들 수 있습니다.

table{ border:1px solid black; border-collapse:collapse; }
th, td{ border:1px solid black; }

*꼭 테이블 태그에 속성을 넣어주셔야 합니다!

 

 

[같이 보면 좋은 글]

[coding/css] - [css] border-style 종류

[coding/css] - [css] 모서리 둥글게 하기

[coding/html] - [html] 을 이용해 테이블 비율 고정 하기

[coding/css] - [css] tr태그 여백 주기

---

그럼 이만.

총총.