table테두리

[namnine9]

.price-table {
width: 100%;
max-width: 750px;
background: white;
border-collapse: collapse;
border-radius: 10px;
}
.price-table td,
.price-table th {
padding: 5px;
border-bottom: 5px solid grey;
text-align: center;
width: 10%;
}

price-table은 table태그의 클래스명입니다.
table에 border-radius속성이 적용은 됐지만, 사진과 같이 table 테두리 밑에 부분이 테두리 윗부분이랑 미세하게 차이가 있었던 것으로 문제가 발생하였습니다.
원인은 border-collapse: collapse, border-bottom: 5px solid grey  이 두 개의 속성을 같이 적용 할 때 였고, table테두리 밑부분에 여백같은 것이 생기길래 border-style : hidden을 넣어봤더니
테두리 밑부분 여백이 사라지면서 border-radius속성이 윗부분 밑부분 차이없게 잘 작용되었습니다.

table에 border-style : hidden을 넣어서 해결은 했지만 왜 저 두 개의 속성을 같이 썼을 때 table테두리 밑에 여백같은 게 생기는 지 궁금합니다.

[codingapple]

아마 table태그 td태그 테두리가 둘다 있어서 그런가봅니다

[글쓴이]

글