둥근 테이블 모서리 CSS 만

검색 및 검색했지만 내 요구 사항에 대한 솔루션을 찾을 수 없습니다.

평범한 HTML 테이블이 있습니다. 나는 이미지 나 JS 를 사용 하지 않고 , 즉 순수한 CSS만을 사용 하지 않고 둥근 모서리를 원합니다 . 이렇게 :

모서리 셀의 경우 둥근 모서리, 셀의 경우 1px두꺼운 테두리.

지금까지 나는 이것을 가지고있다 :

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

그러나 그것은 세포에 대한 경계가 없습니다. 테두리를 추가하면 둥글 지 않습니다!

해결책이 있습니까?

별도의 테두리가있는 FF 및 Chrome (다른 테스트를 수행하지 않음)에서 잘 작동하는 것 같습니다. http://jsfiddle.net/7veZQ/3/

편집 : 스케치의 비교적 깔끔한 구현은 다음과 같습니다.

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

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

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

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

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

저에게는 Twitter Bootstrap 솔루션 이 좋아 보입니다. IE <9 (IE 8 이하에서는 둥근 모서리 없음)는 제외하지만, 웹 애플리케이션을 개발한다면 괜찮다고 생각합니다.

CSS / HTML :

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

여기에서 재생할 수 있습니다 (jsFiddle에서)

첫째, -moz-border-radius모든 브라우저를 지원하려는 경우 그 이상이 필요 합니다. border-radius다음과 같이 plain을 포함한 모든 변형을 지정해야 합니다.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

둘째, 질문에 직접 답하기 위해 border-radius실제로 테두리를 표시하지 않습니다. 모서리가있는 경우 테두리의 모서리 모양을 설정합니다.

테두리를 켜서 둥근 모서리를 얻으 border려면 td및 th요소 에 대한 속성 도 필요합니다 .

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

배경색 (또는 그래픽)이있는 경우에도 둥근 모서리가 표시됩니다. 물론 둥근 모서리를 테두리없이 표시하려면 주변 요소와 다른 배경색이어야합니다.

일부 구형 브라우저는 border-radius표 / 표 셀을 배치 하는 것을 좋아하지 않는다는 점은 주목할 가치가 있습니다. <div>각 셀 내부에 넣고 스타일을 지정하는 것이 좋습니다. 그러나 이것은 모든 브라우저의 현재 버전에 영향을 미치지 않아야합니다 (둥근 모서리를 전혀 지원하지 않는 IE 제외-아래 참조)

마지막으로 IE가 전혀 지원하지 않는다는 것은 아닙니다 border-radius(IE9 베타는 지원 하지만 대부분의 IE 사용자는 IE8 이하를 사용합니다). 테두리 반경을 지원하기 위해 IE를 해킹하려면 http://css3pie.com/ 을 참조 하십시오.

[편집하다]

좋아요,이게 저를 괴롭 혔습니다. 그래서 몇 가지 테스트를했습니다.

여기 내가 가지고 놀았 던 JSFiddle 예제가 있습니다.

놓친 중요한 것이 border-collapse:separate;테이블 요소에있는 것 같습니다. 이렇게하면 셀이 테두리를 서로 연결하지 못하여 테두리 반경을 선택할 수 있습니다.

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

선택한 답변은 끔찍합니다. 코너 테이블 셀을 대상으로하고 해당 테두리 반경을 적용하여이를 구현합니다.

상단 모서리를 얻으려면 th 요소 유형의 첫 번째 및 마지막에 테두리 반경을 설정 한 다음 tr 유형의 마지막에 td 유형 의 마지막 및 첫 번째 테두리 반경을 설정 하여 하단 모서리를 가져옵니다.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

IE <9에 대한 둥근 모서리 및 기타 CSS3 동작에 대해 찾은 최상의 솔루션은 http://css3pie.com/ 에서 찾을 수 있습니다 .

플러그인을 다운로드하고 솔루션 구조의 디렉토리에 복사하십시오. 그런 다음 스타일 시트에 동작 태그가 있는지 확인하여 플러그인을 가져옵니다.

내 테이블에 둥근 모서리, 색상 그라디언트 및 상자 그림자를 제공하는 내 프로젝트의 간단한 예 :

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Visual Studio CSS intellisense가 알 수없는 속성에 대해 녹색 밑줄을 제공하더라도 걱정하지 마십시오. 실행해도 여전히 작동합니다. 일부 요소는 명확하게 문서화되지 않았지만 예제는 특히 첫 페이지에서 꽤 좋습니다.

개인적인 경험을 통해 순수한 CSS로 HTML 테이블 셀의 모서리를 둥글게 할 수 없다는 것을 알게되었습니다 . 테이블의 가장 바깥 쪽 테두리를 둥글게 할 수 있습니다.

이 자습서에 설명 된대로 이미지를 사용해야합니다.

약간 거칠지 만 여기에 CSS와 HTML로만 구성된 것이 있습니다.

• 둥근 바깥 쪽 모서리
• 헤더 행
• 여러 데이터 행

이 예제는 또한 :hover각 데이터 셀에 대해 의사 클래스를 사용합니다 <td>. 요소는 필요에 맞게 쉽게 업데이트 할 수 있으며 마우스 오버를 빠르게 비활성화 할 수 있습니다.

(그러나 나는 아직 :hover전체 행에 대해 제대로 작동 <tr>하지 못했습니다. 마지막으로 마우스를 올려 놓은 행은 하단에 둥근 모서리가 표시되지 않습니다. 간과되는 간단한 것이 있다고 확신합니다.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

<div>테이블 주위 에 래퍼를 추가 하고 다음 CSS를 적용합니다.

border-radius: x px;
overflow: hidden;
display: inline-block;

이 래퍼에.

@luke flournoy의 훌륭한 대답을 적용하려면- th테이블에서 사용하지 않는 경우 둥근 테이블을 만드는 데 필요한 모든 CSS는 다음과 같습니다.

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

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

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

셀을 건드리지 않고 테이블의 양쪽에 둥근 모서리를 원하는 경우 이것을 시도 할 수 있습니다. http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

샘플 HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

CSS로 쉽게 변환되는 SCSS, sassmeister.com 사용

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

다음은 여러 브라우저에서 저에게 도움이되었던 것이므로 앞으로 누군가에게 도움이되기를 바랍니다.

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

분명히 #contentblock부분은 필요에 따라 교체 / 편집 할 수 border-radius.htc있으며 Google 또는 즐겨 찾는 웹 브라우저에서 검색 하여 파일을 찾을 수 있습니다 .

이것은 css3최신 비 IE <9 브라우저 만 지원합니다.

여기 에서 확인 하세요 . 사용 가능한 모든 브라우저에 대한 round 속성이 파생됩니다.

<head>태그 사이에 추가 :

<style>
  td {background: #ffddaa; width: 20%;}
</style>

그리고 몸에서 :

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

예를 들어 셀 색상, 내용 및 서식은 물론입니다.
div 내에서 색상으로 채워진 셀 간격에 관한 것입니다. 이렇게하면 검은 색 셀 테두리 / 테이블 테두리가 실제로 div 배경색이됩니다.
부드러운 둥근 모서리 효과를 얻으려면 div-border-radius를 별도의 셀 모서리 테두리 반경보다 약 2 개 더 큰 값으로 설정해야합니다.

테이블 테두리의 강의 ...

참고 : 아래 HTML / CSS 코드는 IE에서만 볼 수 있습니다. 코드는 Chrome에서 올바르게 렌더링되지 않습니다!

우리는 다음을 기억해야합니다.

1. 테이블에는 테두리가 있습니다. 외부 경계 (테두리 반경도 가질 수 있음)

2. 셀 자체에도 테두리가 있습니다 (테두리 반경도 가질 수 있음).

3. 표와 셀 테두리가 서로 간섭 할 수 있습니다.

   셀 테두리는 테이블 테두리를 뚫을 수 있습니다 (예 : 테이블 테두리).

   이 효과를 확인하려면 아래 코드에서 CSS 스타일 규칙을 다음과 같이 수정하십시오.
   i. 표 {border-collapse : 분리됨;}
   ii. 표의 모서리 셀을 둥글게하는 스타일 규칙을 삭제합니다.
   iii. 그런 다음 경계 간격을 조정하여 간섭을 확인할 수 있습니다.

4. 그러나 표 테두리와 셀 테두리는 COLLAPSED가 될 수 있습니다 (사용 : border-collapse : collapse;).

5. 축소되면 셀과 표 테두리가 다른 방식으로 간섭합니다.

   나는. 표 테두리가 둥글지만 셀 테두리가 정사각형 인 경우 셀의 모양이 우선하고 표의 곡선 모서리가 사라집니다.

   ii. 반대로, 모서리 셀이 구부러져 있지만 테이블 경계가 정사각형이면 모서리 셀의 곡률을 경계로하는보기 흉한 사각형 모서리가 표시됩니다.

6. 셀의 속성이 우선하므로 테이블의 네 모서리를 둥글게하는 방법은 다음과 같습니다.

   나는. 테이블에서 접는 테두리 (사용 : border-collapse : collapse;).

   ii. 테이블의 모서리 셀에 원하는 곡률을 설정합니다.
   iii. 테이블의 모서리가 둥근 지 여부는 중요하지 않습니다 (예 : 테두리 반경이 0 일 수 있음).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS :

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}