table 칸의 구분선을 심플하게 만들고 싶습니다.

Question

보통 table의 border 값을 줘서 구분선을 만들기도 하고 CSS로 border 속성을 줘서 만들기 합니다.

또는 테이블의 배경색을 지정하고 셀 안을 흰색으로 채운 뒤 cellspacing 값을 1로 줘서 칸을 만들기도 합니다.

그러나, CSS 경우 겹치는 td인 경우에는 선이 두꺼워지는 현상이 생기며 테이블에 배경색을 지정하는 식의 방법은 웹사이트의 배경색에 따라 제약이 생기기도 합니다.

어떻게 하면 독립적인 심플한 선을 만들 수 있나요?

Answer 1

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td>내용</td>
		<td>내용</td>
	</tr>
</table>

<style type="text/css">
body { background-color: #FFF; }
table { border-collapse: collapse; }
table td { border: 1px solid #999; color: #000; padding: 10px; }
</style>

위 코드에서 table에 border-collapse: collapse; 설정해 줘야 td끼리 만나는 영역에 선이 두꺼워지는 문제를 해결할 수 있습니다.