CSS
border 겹침 없애기
Kale_coding
2022. 7. 21. 18:18
1. <table>태그를 쓸 때 : border-collapse: collapse;
HTML
<table>
<tr>
<td>내용1</td>
<td>내용2</td>
<td>내용3</td>
</tr>
<tr>
<td>내용4</td>
<td>내용5</td>
<td>내용6</td>
</tr>
</table>적용 전 CSS
td {
padding:5px;
border:1px solid #000;
}
적용 후 CSS
td {
padding:5px;
border:1px solid #000;
}
table {
border-collapse: collapse;
}
border-collapse: collapse; 은 table 태그에 적용하면 된다.
2. display: table태그를 쓸 때 : border-collapse: collapse;
HTML
<div class="wrap">
<div class="box">박스1</div>
<div class="box">박스2</div>
<div class="box">박스3</div>
</div>CSS
.wrap {
display: table;
border-collapse: collapse;
}
.box {
padding: 10px;
border: 1px solid #000;
display: table-cell;
}
부모요소에 display: table; / 자식요소에 display: table-cell; 속성을 부여한다.
border-collapse는 table 속성일 때만 쓸 수 있는 것 같으므로 border를 하나로 합칠 때 border-collapse를 쓰고싶을 때에는 table태그를 쓰거나 display: table 을 쓰면 될 것 같다.
3. table 속성이 아닌 경우
HTML
<div class="wrap2">
<div class="box2">박스1</div>
<div class="box2">박스2</div>
<div class="box2">박스3</div>
<div class="box2">박스4</div>
</div>적용 전 CSS
.wrap2 {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.box2 {
width: 50%;
text-align: center;
border: 1px solid #000;
box-sizing: border-box;
}
적용 후 CSS
.wrap2 {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
border-left: 1px solid #000; /* 맨 왼쪽의 선이 사라졌기 때문에 부모박스의 왼쪽에 border값을 줌 */
}
.box2 {
width: 50%;
text-align: center;
border: 1px solid #000;
box-sizing: border-box;
margin-top: -1px; /* 가로 겹침 선 없애기 */
border-left: none; /* 세로 겹침 선 없애기1 */
}
가로로 겹치는 선은 자식요소를 위로 -1px 당겨줌(margin-top: -1px;)으로서 겹치는 선이 안보이게 되는 것 같다.
세로로 겹치는 선은 자식요소의 왼쪽 선을 없앤 후(border-left: none;) 부모요소에서 왼쪽에 선을 만든다.
참고 사이트