CSS3의 border-radius 속성과 border-collapse : collapse는 섞이지 않습니다. 모서리가 둥근 접힌 테이블을 만들려면 테두리 반경을 어떻게 사용할 수 있습니까?

편집 - 기존 제목 : 달성하는 다른 방법이 있습니까 border-collapse:collapse에서 CSS(A 붕괴, 둥근 모서리 테이블을 위해)은?

단순히 테이블의 경계를 무너 뜨려도 근본 문제가 해결되지는 않기 때문에 토론을 더 잘 반영하도록 제목을 업데이트했습니다.

CSS3 border-radius속성을 사용하여 모서리가 둥근 테이블을 만들려고 합니다. 내가 사용하는 테이블 스타일은 다음과 같습니다.

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

여기 문제가 있습니다. 또한 border-collapse:collapse속성 을 설정하고 싶을 때 border-radius더 이상 작동하지 않습니다. border-collapse:collapse실제로 사용하지 않고 동일한 효과를 얻을 수있는 CSS 기반 방법 이 있습니까?

편집 :

여기서 문제를 보여주기 위해 간단한 페이지를 만들었습니다 (Firefox / Safari 만 해당).

문제의 대부분은 테이블을 둥근 모서리로 설정해도 모서리 td요소 의 모서리에 영향을 미치지 않는 것 같습니다 . 테이블이 모두 하나의 색상이라면 상단과 하단 td모서리를 각각 첫 번째와 마지막 행에 대해 반올림 할 수 있기 때문에 문제가되지 않습니다 . 그러나 테이블과 제목을 구분하기 위해 서로 다른 배경색을 사용하므로 내부 td요소에도 둥근 모서리가 표시됩니다.

제안 된 솔루션 요약 :

둥근 모서리가있는 다른 요소로 테이블을 둘러싸면 테이블의 정사각형 모서리가 "블리드"되므로 작동하지 않습니다.

테두리 너비를 0으로 지정하면 테이블이 축소되지 않습니다.

td셀 간격을 0으로 설정 한 후 아래쪽 모서리가 여전히 사각형입니다.

대신 JavaScript를 사용하면 문제를 피할 수 있습니다.

가능한 해결책:

테이블은 PHP로 생성되므로 각 외부 th / td에 다른 클래스를 적용하고 각 코너를 개별적으로 스타일 지정할 수 있습니다. 매우 우아하지 않고 여러 테이블에 적용하기가 약간 어려우므로 제안하지 마십시오.

가능한 해결책 2는 JavaScript (특히 jQuery)를 사용하여 모서리의 스타일을 지정하는 것입니다. 이 솔루션도 작동하지만 여전히 찾고있는 것이 아닙니다 (나는 까다 롭습니다). 두 가지 예약이 있습니다 :

1. 이것은 매우 가벼운 사이트이며 JavaScript를 최소한으로 유지하고 싶습니다.
2. 국경 반경을 사용하는 것이 저에게있어 호소력의 일부는 우아한 저하와 점진적인 향상입니다. 모든 둥근 모서리에 테두리 반경을 사용하여 CSS3 가능 브라우저에서 일관된 둥근 사이트를 만들고 다른 사용자에게는 일관된 정사각형 사이트를 원합니다 (IE를보고 있습니다).

오늘 CSS3 로이 작업을 수행하려고하면 불필요하게 보일 수 있지만 이유가 있습니다. 또한이 문제는 CSS3 지원이 좋지 않은 w3c 사양의 결과이므로 CSS3이 더 광범위하게 지원되는 경우 모든 솔루션이 여전히 관련성이 있고 유용 할 것이라고 지적하고 싶습니다.

나는 그것을 알아. 특별한 선택기를 사용해야합니다.

테이블의 모서리를 둥글게하는 문제는 td 요소도 둥글 지 않았다는 것입니다. 다음과 같이하면 해결할 수 있습니다.

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

여전히 border-collapse: collapse모든 것을 깨는 문제가 있다는 것을 제외하고는 모든 것이 올바르게 반올림됩니다 .

해결 방법은 테이블에 기본값 을 추가border-spacing: 0 하고 그대로 두는 것 border-collapse: separate입니다.

다음 방법은 '실제'테두리 대신 box-shadow스프레드를 사용하여 작동합니다 (Chrome에서 테스트) 1px.

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

cellspacing=01px 테두리 ( border-spacing: 0솔루션으로 할 수없는)를 허용 하는 CSS 전용 솔루션 ( HTML에서 설정할 필요가 없음 )을 원한다면 다음을 수행하는 것을 선호합니다.

• 를 설정 border-right하고 border-bottom테이블의 셀 ( td과 th)
• 의 셀을 지정 첫 번째 행의border-top
• 첫 번째 열의 셀에 aborder-left
• first-child및 last-child셀렉터를 사용하여 네 모퉁이의 표 셀에 해당하는 모퉁이를 둥글게 만듭니다.

여기 데모를보십시오.

다음과 같은 HTML이 주어진다 :

아래 예를 참조하십시오.

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

??? table{border-spacing: 0}대신에 사용해 보셨습니까 table{border-collapse: collapse}?

테이블 주위에 다른 요소를 배치하고 둥근 테두리로 스타일을 지정해야 할 것입니다.

작업 초안 지정 border-radius값이 때 테이블 소자에 적용되지 않고 border-collapse있다 collapse.

Ian이 말했듯이 해결책은 테이블을 div 안에 중첩시키고 다음과 같이 설정하는 것입니다.

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

를 사용 overflow:hidden하면 사각형 모서리가 div를 통해 번지지 않습니다.

내가 아는 한, 모든 셀을 다음과 같이 수정하는 것이 유일한 방법입니다.

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

그런 다음 아래쪽과 오른쪽에 테두리를 가져옵니다.

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childie6에서는 유효하지 않지만 사용하고 있다면 border-radius신경 쓰지 않는다고 가정합니다.

편집하다:

예제 페이지를 살펴본 후 셀 간격 및 패딩 으로이 문제를 해결할 수있는 것으로 보입니다.

표시되는 두꺼운 회색 테두리는 실제로 테이블의 배경입니다 (테두리 색상을 빨간색으로 변경하면이를 명확하게 볼 수 있습니다). 셀 간격을 0 (또는 동등하게 td, th { margin:0; })으로 설정하면 회색 "테두리"가 사라집니다.

편집 2 :

하나의 테이블 로이 작업을 수행 할 수있는 방법을 찾을 수 없습니다. 머리글 행을 중첩 테이블로 변경하면 원하는 효과를 얻을 수 있지만 더 효과적이고 역동적이지 않습니다.

나는 의사 요소를 사용하여 해결 방법을 시도 :before하고 :after에를 thead th:first-child하고thead th:last-child

테이블을 포장과 결합하여 <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

jsFiddle 참조

크롬에서 작동합니다 (13.0.782.215) 다른 브라우저에서 작동하는지 알려주세요.

실제로 table내부를 div래퍼로 추가 할 수 있습니다 . 그런 다음이 CSS코드를 래퍼에 할당하십시오 .

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

주어진 답변은 테이블 주위에 테두리가없는 경우에만 작동하며 매우 제한적입니다!

SASS에는 매크로를 사용하여 외부 및 내부 테두리 를 완벽하게 지원 하여 border-collapse와 동일한 스타일을 얻습니다. 실제로 지정하지 않고 축소합니다.

FF / IE8 / Safari / Chrome에서 테스트되었습니다.

IE8이 border-radius를 지원하지 않기 때문에 모든 브라우저에서 순수한 CSS로 멋진 둥근 테두리를 제공하지만 IE8 (정상적으로 저하 됨) :(

일부 구형 브라우저는 에서 작동하기 위해 공급 업체 접두사가 필요할 수 있으므로 필요border-radius 에 따라 코드에 접두사를 추가하십시오.

이 답변은 가장 짧지는 않지만 작동합니다.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

이 스타일을 적용하려면 단순히

<table>

다음에 태그를 지정하십시오.

<table class="roundedTable">

위의 CSS 스타일을 HTML에 포함시켜야합니다.

도움이 되었기를 바랍니다.

경계가 있고 스크롤 가능한 테이블의 경우 이것을 사용하십시오 (변수 대체, $시작 텍스트)

당신이 사용하는 경우 thead, tfoot또는 th, 단지 대체 tr:first-child하고 tr-last-child그리고 td그들과 함께.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML :

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

나는 같은 문제가 있었다. html 문서에서 border-collapse완전히 제거 하고 사용하십시오 cellspacing="0" cellpadding="0". 예:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

방금 완벽하게 작동하는 것처럼 보이는 CSS를 썼습니다.

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

border-collapse가있는 솔루션 : 테이블과 디스플레이에 별도 : tbody와 thead에 대해 인라인 테이블.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

나는 HTML과 CSS를 처음 접했고 여기에 내가 찾은 것을 해결할 해결책을 찾고있었습니다.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

나는 그것을 시도하고 그것이 작동하는 것을 추측한다 :)

동일한 문제가 발생한 후이 답변을 찾았지만 꽤 간단하다는 것을 알았습니다. 테이블 오버플로를 지정하십시오.

포장 요소가 필요하지 않습니다. 물론, 이것이 7 년 전 질문이 처음 제기되었을 때 효과가 있었는지는 모르겠지만 지금은 효과가 있습니다.

둥근 모서리와 경계 셀이있는 테이블. @Ramon Tayag 솔루션 사용

핵심은 border-spacing: 0그가 지적한대로 사용 하는 것입니다.

SCSS를 사용하는 솔루션 .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

나는 "디스플레이"로 실험을 시작하고 그 발견 : border-radius, border, margin, padding, A는에 table함께 표시됩니다 :

display: inline-table;

예를 들어

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

그러나 우리 width는 모든 열을 설정해야합니다

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

다음은 http://medialoot.com/preview/css-ui-kit/demo.html 에서 둥근 모서리가있는 테이블을 구현하는 방법의 최근 예입니다 . 위의 Joel Potter가 제안한 특수 선택기를 기반으로합니다. 보시다시피 IE를 약간 행복하게 만드는 마술도 포함되어 있습니다. 행 색상을 대체하는 몇 가지 추가 스타일이 포함되어 있습니다.

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

방법은 다음과 같습니다.

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

또는

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

나는 항상 Sass를 사용 하여이 방법을 수행

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

지금까지 최고의 솔루션은 자체 솔루션에서 비롯되었으며 다음과 같습니다.

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

국경 반경이 공식적으로 지원됩니다. 따라서 위의 모든 예에서 "-moz-"접두사를 삭제할 수 있습니다.

또 다른 트릭은 상단과 하단 행에 테두리와 동일한 색상을 사용하는 것입니다. 3 가지 색상이 모두 동일하기 때문에 물리적으로는 아니더라도 완벽하게 둥근 테이블처럼 보입니다.