CSS 속성 테이블의 테두리 축소 테두리 병합

설명

표의 행 테두리와 열 테두리를 하나의 테두리로 합칠지, 아니면 별도의 테두리를 가질지 설정하는 CSS 속성입니다.

별도의 기본값입니다. 테두리는 병합되지 않고 분리됩니다.
경계를 접으면 병합됩니다. 즉, 인접해 있으면 동일한 경계를 공유합니다.

DIV+CSS 시대에 테이블의 무게는 점점 낮아지고 있지만, 때로는 로컬 테이블이 여전히 매우 유용할 때가 있습니다

특히 도표 작성에는 테이블이 더 편리합니다.
물론 표 작성에 테두리는 필수인데, td에 직접 테두리를 추가하면 표 바깥쪽에는 한 줄, 안쪽에는 이중선이 생기는 상황이 발생합니다.

다른 별도의 설정을 통해 모든 단일 선을 구현할 수도 있지만 가장 간단한 방법은 CSS에서 연결된 테두리의 병합 또는 분리를 제어하는 ​​border-collapse 속성을 제공하는 것입니다.

CSS 코드

<span style="color: #800000;"><style>
<!--
table</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">     border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">     overflow</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> tr</span>{<span style="color: #ff0000;"> white-space</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;"> td</span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">#333333 solid 1px</span>;}<span style="color: #800000;">
-->
<style></span>

html:

<span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellspacing</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

참고자료:

http://www.manongjc.com/article/1211.html

http://www.manongjc.com/article/1212.html