programing

국경-반지름 속성과 국경-붕괴:붕괴는 섞이지 않습니다.테두리 반경을 사용하여 모서리가 둥근 접힌 테이블을 만들려면 어떻게 해야 합니까?

newstyles 2023. 10. 31. 20:36

국경-반지름 속성과 국경-붕괴:붕괴는 섞이지 않습니다.테두리 반경을 사용하여 모서리가 둥근 접힌 테이블을 만들려면 어떻게 해야 합니까?

CSS를 이용해서 모서리가 둥근 테이블을 만들려고 합니다.border-radius소유물 제가 사용하는 은 다음과 제가 사용하고 있는 테이블 스타일은 다음과 같습니다.

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

여기 문제가 있습니다.나는 또한 설정하고 싶습니다.border-collapse:collapse재산, 그리고 그것이 설정되면.border-radius더 이상 작동하지 않습니다.다음과 같은 효과를 얻을 수 있는 CSS 기반 방법이 있습니까?border-collapse:collapse실제로 사용하지 않고요?

테이블에 모서리를 둥글게 설정하는 것이 모서리의 모서리에 영향을 주지 않는 것이 문제의 큰 부분인 것 같습니다.td요소들.테이블이 모두 한가지 색상이면 상하의를 만들 수 있기 때문에 문제가 되지 않습니다.td첫 번째 행과 마지막 행에 대해 각각 반올림한 모서리하지만 표제와 줄무늬를 구분하기 위해 표에 다른 배경색을 사용하고 있습니다. 그래서 안쪽에td요소들은 그들의 둥근 모서리도 보여줄 것입니다.

테이블의 정사각형 모서리가 "피를 흘리기" 때문에 모서리가 둥근 다른 요소로 테이블을 둘러싸면 작동하지 않습니다.

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

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

테이블은 PHP로 생성되어 있기 때문에, 저는 단지 각 외부 th/tds에 다른 클래스를 적용하고 각 모서리를 따로 스타일링 할 수 있었습니다.여러 테이블에 적용하는 것은 그다지 우아하지 않고 조금 괴로우니 이런 것은 하지 않는 편이 낫습니다, 계속해서 건의해 주시기 바랍니다.

자바스크립트 없이 하고 싶습니다.

난 이해했다.특별한 셀렉터를 사용하시면 됩니다.

테이블의 모서리를 둥글게 하는 것의 문제는td요소도 둥글지 않았습니다.이를 해결하려면 다음과 같은 작업을 수행해야 합니다.

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

이제 모든 것이 제대로 돌아가지만, 아직도 문제가 남아있다는 것을 제외하고는border-collapse: collapse모든 것을 깨뜨리는 것.

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

다음 방법은 (Chrome에서 테스트) 를 사용하여 작동합니다.box-shadow널리 퍼지면서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;
    }
<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baz</td>
      <td>Qux</td>
    </tr>
    <tr>
      <td>Life is short</td>
      <td rowspan="3">and</td>
    </tr>
    <tr>
      <td>Love</td>
    </tr>
    <tr>
      <td>is always over</td>
    </tr>
    <tr>
      <td>In the</td>
      <td>Morning</td>
    </tr>
  </tbody>
</table>

CSS 전용 솔루션을 원하는 경우(설정할 필요 없음)cellspacing=01px 경계를 허용하는 HTML에서 (당신이 할 수 없는)border-spacing: 0solution), 다음과 같은 작업을 선호합니다.

  • 를 합니다.border-right그리고.border-bottom테이블 셀의 경우(td그리고.th)
  • 첫번째 줄에 있는 세포들에게 a를 줍니다.border-top
  • 첫번째 열에 있는 세포들을 a로 주어라.border-left
  • 으로.first-child그리고.last-child셀렉터, 네 모서리에 있는 테이블 셀에 적합한 모서리를 둘러봅니다.

여기 데모를 보세요.

다음과 같은 HTML이 주어지면:

아래의 예를 참조:

   

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 td:first-child {
  border-left: 1px solid #bbb;
}
table tr th {
  background: #eee;
  text-align: left;
  border-top: solid 1px #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th: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>
    <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.

이안의 말처럼, 해결책은 디브 안에 테이블을 넣고 이렇게 세팅하는 것입니다.

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

와 함께overflow:hidden, 네모난 모서리가 디브를 통과해서 피가 나지 않을 겁니다

내가 아는 한, 당신이 할 수 있는 유일한 방법은 모든 셀을 이렇게 수정하는 것입니다.

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; }) 회색 "borders"가 사라집니다.

편집 2:

테이블 하나만 가지고는 이걸 할 방법을 찾을 수가 없어요.헤더 행을 중첩 테이블로 변경하면 원하는 효과를 얻을 수 있지만 동적이 아닌 작업량이 더 많아집니다.

방법은 다음과 같습니다.

div {
  border: 2px solid red;
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
  background-color: blue;
  height: 100%;
  width: 100%;
}
<div>
  <table>
    <tr>
      <td><br></td> 
    </tr>
  </table>
</div>

아니면

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

실제로 당신은 당신의 것을 추가할 수 있습니다.table안에div그 포장지로서. 그리고 이것들을 할당합니다.CSS포장지 코드:

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

table {
  border-collapse: collapse;
}

저는 의사 요소를 이용한 해결책을 시도했습니다.:before그리고.:afterthead th:first-child그리고.thead th:last-child

테이블을 a로 포장하는 것과 함께.<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)에서 작동합니다. 이것이 다른 브라우저에서 작동하는지 알려주세요.

주어진 답은 테이블 주위에 테두리가 없을 때만 작동하는데, 이것은 매우 제한적입니다!

이를 위해 SASS에 매크로가 있습니다. 이 매크로는 외부 및 내부 경계를 완전히 지원하여 경계 축소와 동일한 스타일을 달성합니다. 실제로 지정하지 않고 붕괴합니다.

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

IE8이 테두리 반경을 지원하지 않기 때문에 IE8을 제외한 모든 브라우저에서 순수 CSS로 멋진 둥근 테두리를 제공합니다 :(

일부 오래된 브라우저에서는 벤더 접두사를 사용해야 합니다.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">

그리고 당신의 HTML에 위의 CSS 스타일을 반드시 포함시키세요.

도움이 되길 바랍니다.

완벽하게 작동하는 것처럼 보이는 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;
    }
<table>
  <thead>
    <tr>
      <th>
        Table Head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Table Data
      </td>
    </tr>
  </tbody>
</table>

/* end complicated rounded table corners !*/

테두리가 있고 스크롤 가능한 표의 경우 이를 사용합니다(변수 바꾸기,$시작 텍스트)

사용하는 경우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>

저도 같은 문제가 있었습니다.제거한다.border-collapse전체 및 용도:cellspacing="0" cellpadding="0"html 문서에서.예:

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

동일한 문제에 직면한 후 이 답변을 찾았지만 테이블 오버플로를 제공하는 것이 매우 간단합니다.

랩핑 요소가 필요 없습니다.7년 전에 질문을 했을 때 효과가 있었을지는 모르겠지만 지금은 효과가 있습니다.

테두리 접기 솔루션:테이블과 디스플레이용으로 구분:인라인테이블 tbody와 광고.

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
}

나도 해봐, 뭐가 먹히는지 맞춰봐 :)

저는 이상한 해킹과 해결책을 많이 볼 수 있기 때문에 테이블을 만들기 위한 저의 해결책을 제안하고자 합니다.border-radius시각적인 효과는 다음과 같습니다.border: collapse;단순히 중첩된 행과 셀을 대상으로 설정하여 테두리를 끕니다.

첫째 자녀 등과 같은 다른 의사 선택기를 사용하여 필요에 따라 보다 심층적으로 정보를 얻을 수 있지만 이는 최소한의 해결책입니다.

table {
  width: 100%;
  border-spacing: 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}

th, td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

th:last-child, td:last-child  {
    border-right: none;
}

tr:last-child td {
    border-bottom: none;
}
<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </tbody>
</table>

저는 "디스플레이"에 대한 실험을 시작했고, 다음을 발견했습니다.border-radius,border,margin,padding, 일순간에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 의 라운드 corners로 테이블을 구현하는 방법의 최근 예입니다.조엘 포터가 위에서 제안한 특별한 셀렉터를 바탕으로 한 것입니다.보시다시피 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;
}

SCSS를 이용한 해결 방법은 다음과 같습니다.둥근 모서리와 테두리가 있는 셀로 테이블을 만듭니다.

이 솔루션은 @Ramon Tayag의 접근 방식을 사용합니다.핵심은 사용하는 것입니다.border-spacing: 0, 그의 지적대로

$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;
  }
}

가장 쉬운 방법은...

table {
 border-collapse: inherit;
 border: 1px solid black;
 border-radius: 5px;
}

다른 대답들 중 일부는 좋지만, 그들 중 어느 것도 당신이 사용하는 것을 고려하지 않습니다.thead,tbody그리고.tfoot 둘 중 할 수 아니면 둘 중 하나를 조합할 수 있는 경우.그리고 바르는 순간 불필요한 라운딩이나 테두리가 생길 수 있습니다.그래서 @NullUserException에서 css 전용 답변을 조정해 보았습니다.

table {
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: darkgreen;
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
}
table tr td,
table tr th {
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: darkgreen;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: darkgreen;
}
table tr th:last-child,
table tr td:last-child {
    border-right-width: 2px;
    border-right-style: none;
    border-right-color: darkgreen;
}
table tr:last-child td,
table tr:last-child th {
    border-bottom-width: 2px;
    border-bottom-style: none;
    border-bottom-color: darkgreen;
}
/* top-left border-radius */
table :not(tfoot) tr:first-child th:first-child,
table :not(tfoot) tr:first-child td:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0;
}

/* top-right border-radius */
table :not(tfoot) tr:first-child th:last-child,
table :not(tfoot) tr:first-child td:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
}

/* bottom-left border-radius */
table :not(thead) tr:last-child th:first-child,
table :not(thead) tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

/* bottom-right border-radius */
table :not(thead) tr:last-child th:last-child,
table :not(thead) tr:last-child td:last-child{
    border-bottom-right-radius: 5px;
}

/*Handle thead and tfoot borders*/
table thead tr:first-child th,
table thead tr:first-child td {
  border-top-style: none;
}
table thead tr:last-child th,
table thead tr:last-child td {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: darkgreen;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
  border-bottom-style: none;
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: darkgreen;
}
table tr:first-child th,
table tr:first-child td {
  border-top-style: none;
}

darkgreen표 전체에 걸쳐 경계가 정확하다는 것을 명확하게 보여주는 데 사용됩니다.기본적으로 어디를 보든지darkgreen- 테이블의 테두리를 스타일링하는 곳입니다.
이 코드펜은 정규 테이블과 다음과 같은 테이블을 보여줍니다.thead,tbody그리고.tfoot. CSS는 위의 CSS와 동일하며 스타일 재설정만 추가됩니다.th을 쓰는 둘다알 수 글을 쓰는 순간 둘 다 동일하게 렌더링되는 것을 볼 수 있습니다.

저는 항상 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>

table {
  width: 200px;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
}

table td {
  border-width: 1px 0 0 1px;
}

table tr:first-child td {
  border-top: none;
}

table tr td:first-child {
  border-left: none;
}

div {
  background-color: lime;
}
<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td><div>1</div></td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

"overflow: hidden"을 "border-radius"와 함께 사용합니다. 이는 "collapse" 테이블에서도 작동합니다.

예:

border-radius: 1em, overflow: hidden,

언급URL : https://stackoverflow.com/questions/628301/the-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i-use

'programing' 카테고리의 다른 글

AJAX jQuery.load 대 jQuery.get  (0) 2023.10.31
setInterval 및 clear를 사용하려면 어떻게 해야 합니까?간격?  (0) 2023.10.31
깃 배시가 기본값으로 설정되어 있는데도 VSCode에서 전원 셸이 계속 열립니다.  (0) 2023.10.31
실수를 했을 때 >> 프롬프트의 파워셸에서 어떻게 벗어날 수 있습니까?  (0) 2023.10.31
C 또는 C++에서 A 플러그인 시스템 구현  (0) 2023.10.31

'programing'의 다른글

  • 현재글국경-반지름 속성과 국경-붕괴:붕괴는 섞이지 않습니다.테두리 반경을 사용하여 모서리가 둥근 접힌 테이블을 만들려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바