>  기사  >  웹 프론트엔드  >  CSS만으로 둥근 테이블 모서리를 만드는 방법은 무엇입니까?

CSS만으로 둥근 테이블 모서리를 만드는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-10 10:50:02812검색

How to Create Rounded Table Corners with CSS Only?

CSS만 사용한 둥근 테이블 모서리

둥근 테이블 모서리를 만드는 것은 일반적인 디자인 요구 사항입니다. 순수 CSS를 사용하여 이 효과를 얻는 방법은 다음과 같습니다.

table {
  border-collapse: separate;
  border: 1px solid black;
  border-radius: 6px;
}

td, th {
  border-left: 1px solid black;
  border-top: 1px solid black;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

이 접근 방식은 표와 셀에 별도의 테두리를 사용합니다. 테이블에 테두리 반경을 설정하면 모서리가 둥글게 됩니다. 별도의 테두리는 셀의 가장자리가 여전히 직선임을 보장합니다. 테이블 헤더(th)에서 border-top 속성이 제거되어 테이블 데이터의 테두리(td)에 맞춰 정렬됩니다. 마지막으로 각 행의 첫 번째 셀의 왼쪽 테두리가 제거되어 둥근 모서리 효과가 완성됩니다.

위 내용은 CSS만으로 둥근 테이블 모서리를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.