CSS3의 Border-Radius 속성 및 경계-콜라 랩스 : 붕괴는 혼합되지 않습니다. Border-Radius를 사용하여 둥근 모서리가있는 붕괴 된 테이블을 만드는 방법은 무엇입니까?
https://stackoverflow.com/questions/628301
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
편집 - 원본 제목 : 달성 할 수있는 다른 방법이 있습니까? border-collapse:collapse 안에 CSS (무너지고 둥근 코너 테이블을 갖기 위해)?
단순히 테이블의 경계를 붕괴시키는 것이 루트 문제를 해결하지 못한다는 것이 밝혀 졌기 때문에 토론을 더 잘 반영하기 위해 제목을 업데이트했습니다.
나는 둥근 모서리가있는 테이블을 만들려고 노력하고있다 사용 CSS3 border-radius 재산. 내가 사용하는 테이블 스타일은 다음과 같은 것 같습니다.
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
여기에 문제가 있습니다. 나도 설정하고 싶다 border-collapse:collapse 속성, 그리고 그것이 설정 될 때 border-radius 더 이상 작동하지 않습니다. CSS 기반의 방법이 있습니까? border-collapse:collapse 실제로 사용하지 않고?
편집 :
문제를 보여주기 위해 간단한 페이지를 만들었습니다 여기 (Firefox/Safari 만 해당).
문제의 큰 부분은 테이블을 둥근 모서리로 설정하는 것이 코너의 모서리에 영향을 미치지 않는다는 것입니다. td 집단. 테이블이 하나의 색상이라면 상단과 하단을 만들 수 있기 때문에 이것은 문제가되지 않습니다. td 모서리는 각각 첫 번째와 마지막 줄을 위해 둥글게되었습니다. 그러나 테이블에 다른 배경색을 사용하여 제목을 구별하고 스트라이핑을 구별하므로 내부는 td 요소는 둥근 모서리를 보여줄 것입니다.
제안 된 솔루션 요약 :
둥근 모서리가있는 다른 요소로 테이블을 둘러싸는 테이블의 정사각형 모서리가 "블리드를 통과"하기 때문에 작동하지 않습니다.
테두리 너비를 0으로 지정하면 테이블이 무너지지 않습니다.
맨 아래 td 셀 스페이스를 0으로 설정 한 후 코너는 여전히 정사각형입니다.
JavaScript를 사용하여 대신 문제를 피함으로써 작동합니다.
가능한 해결책:
테이블은 PHP에서 생성되므로 각 외부 TH/TDS에 다른 클래스를 적용하고 각 모서리를 별도로 스타일로 적용 할 수 있습니다. 오히려이 작업을 수행하지 않겠습니다. 여러 테이블에 적용하기 위해 매우 우아하지 않고 약간의 고통이 있으므로 제안을 계속하십시오.
가능한 해결책 2는 JavaScript (jQuery, 특히)를 사용하여 모서리를 스타일링하는 것입니다. 이 솔루션은 또한 작동하지만 여전히 내가 찾고있는 것은 아닙니다 (나는 까다 롭다는 것을 알고 있습니다). 두 가지 예약이 있습니다.
- 이것은 매우 가벼운 사이트이며 JavaScript를 최소 최소값으로 유지하고 싶습니다.
- Border-Radius를 사용하는 것이 저를 위해 가지고있는 호소의 일부는 우아한 열화와 진보적 인 향상입니다. 모든 둥근 모서리에 Border-Radius를 사용함으로써 CSS3 용어 브라우저에 지속적으로 둥근 사이트를 갖고 다른 사람들에게는 지속적으로 정사각형 사이트를 갖기를 바랍니다 (즉, 당신을보고 있습니다).
오늘 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 모든 것을 깨뜨립니다. 해결 방법은 설정됩니다 cellspacing="0" 대신 HTML에서 (감사합니다. 조엘).
다른 팁
다음 방법은 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;
}
CSS 전용 솔루션을 원한다면 설정할 필요가 없습니다. cellspacing=0 1px 경계를 허용하는 HTML에서 border-spacing: 0 해결책), 다음을 선호합니다.
- 설정 a
border-right그리고border-bottom테이블 셀의 경우 (td그리고th) - 세포를 제공하십시오 첫번째 줄 ㅏ
border-top - 세포를 제공하십시오 첫 번째 열 ㅏ
border-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-child IE6에서는 유효하지 않지만 사용중인 경우 border-radius 나는 당신이 신경 쓰지 않는다고 생각합니다.
편집하다:
예제 페이지를 살펴본 후 셀 간격 및 패딩 으로이 작업을 수행 할 수있는 것으로 보입니다.
당신이보고있는 두꺼운 회색 경계는 실제로 테이블의 배경입니다 (테두리 색상을 빨간색으로 바꾸면 이것을 명확하게 볼 수 있습니다). 셀 스페이스를 0으로 설정하면 (또는 동등하게 : td, th { margin:0; }) 회색 "테두리"가 사라집니다.
편집 2 :
하나의 테이블만으로 이것을 할 수있는 방법을 찾을 수 없습니다. 헤더 행을 중첩 테이블로 변경하면 원하는 효과를 얻을 수 있지만 더 많은 작업이 아니라 역동적이지 않습니다.
의사 요소를 사용하여 해결 방법을 시도했습니다 :before 그리고 :after 에 thead 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
Chrome (13.0.782.215)에서 저를 위해 일합니다. 다른 브라우저에서 이것이 당신에게 효과가 있는지 알려주세요.
나는 같은 문제가 있었다. 제거하다 border-collapse 전적으로 사용 :cellspacing="0" cellpadding="0"HTML 문서에서. 예시:
<table class="top_container" align="center" cellspacing="0" cellpadding="0">
실제로 당신은 당신의 추가 할 수 있습니다 table 내부 a div 포장지로. 그런 다음 이것들을 할당합니다 CSS 래퍼 코드 :
.table-wrapper {
border: 1px solid #f00;
border-radius: 5px;
overflow: hidden;
}
table {
border-collapse: collapse;
}
주어진 답변은 테이블 주위에 경계가 없을 때만 작동합니다.
이 작업을 수행하기 위해 Sass에 매크로가 있습니다. 그리고 내부 경계, 테두리와 같은 스타일링을 달성합니다. 실제로 지정하지 않고 붕괴.
FF/IE8/SAFARI/Chrome에서 테스트.
모든 브라우저에서 순수한 CSS에서 멋진 둥근 경계를 제공하지만 IE8은 Border-Radius를 지원하지 않기 때문에 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">
HTML에 위의 CSS 스타일을 포함시켜야합니다.
도움이 되었기를 바랍니다.
테두리 및 스크롤 가능한 테이블의 경우 이것을 사용하십시오 (변수 교체, $ 텍스트 시작)
사용하는 경우 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>
방금 완벽하게 작동하는 것처럼 보이는 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
}
나는 그것을 시도하고 그것이 무엇인지 추측한다 :)
같은 문제가 발생한 후이 답을 찾았지만 매우 간단하다는 것을 알았습니다. 테이블을 넘어서주세요 : Hidden
포장 요소가 필요하지 않습니다. 물론, 나는 이것이 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, 안에 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가 제안한 특수 선택기를 기반으로합니다. 보시다시피, 그것은 또한 조금 행복하게 만드는 마법도 포함되어 있습니다. 행의 색상을 번갈아 가며 추가 스타일이 포함되어 있습니다.
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;
}
나는 항상 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;
}
}
}
Border-Radius는 이제 공식적으로 지원됩니다. 따라서 위의 모든 예제에서 "-moz-"접두사를 떨어 뜨릴 수 있습니다.
또 다른 요령은 테두리와 같은 상단 및 하단 행에 동일한 색상을 사용하는 것입니다. 3 가지 색상이 모두 동일하게 사용되면 물리적이지 않더라도 완벽하게 둥근 테이블처럼 보이며 완벽하게 둥근 테이블처럼 보입니다.
