답변:
테두리 반경은 tr 또는 테이블이 아닌 td에만 적용 할 수 있습니다. 다음 스타일을 사용하여 둥근 모서리 테이블에 대해이 문제를 해결했습니다.
table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }border-collapse: separate;작동하지 않습니다.
separateChrome 44에 필요합니다.
이것은 오래된 스레드이지만 원래 목표가 분명히 border-radius행 에 있어야한다는 다른 답변에 대한 OP의 주석 과 행 사이 의 간격을 읽었습니다 . 현재 솔루션이 정확히 그렇게하는 것 같지는 않습니다. theazureshadow의 대답은 올바른 방향으로 향하고 있지만 조금 더 필요한 것 같습니다.
이에 관심이있는 사람들을 위해 행을 분리하고 각 행에 반경을 적용하는 바이올린이 있습니다. (참고 : Firefox는 현재 background-color테두리 반경 에서 표시 / 잘림 에 버그가 있습니다.)
코드는 다음과 같습니다 (그리고 theazureshadow가 언급했듯이 이전 브라우저 지원의 경우 필요한 다양한 공급 업체 접두사 border-radius추가).
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
border: solid 1px #000;
border-style: solid none;
padding: 10px;
background-color: cyan;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}보너스 정보 : border-radius에 border-collapse: collapse;및 테두리가 설정된 테이블에는 영향을주지 않습니다 td. 그리고 경우에 중요하지 않습니다 border-radius에 대한 설정 table, tr또는 td- 그것은이 무시됩니다.
tr 요소는 border-radius를 준수합니다. 순수한 html 및 css를 사용할 수 있으며 javascript는 사용할 수 없습니다.
JSFiddle 링크 : http://jsfiddle.net/pflies/zL08hqp1/10/
tr {
border: 0;
display: block;
margin: 5px;
}
.solid {
border: 2px red solid;
border-radius: 10px;
}
.dotted {
border: 2px green dotted;
border-radius: 10px;
}
.dashed {
border: 2px blue dashed;
border-radius: 10px;
}
td {
padding: 5px;
}<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr class='dotted'>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class='solid'>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr class='dotted'>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr class='dashed'>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>이 경우 국경을 무너 뜨리는 것은 잘못된 일이라고 생각합니다. 그것들을 접는 것은 기본적으로 두 개의 인접한 셀 사이의 경계가 공유된다는 것을 의미합니다. 즉, 반경이 주어진 경우 어느 방향으로 커브를해야하는지 명확하지 않습니다.
대신 첫 번째 구축 전차의 왼쪽 모서리 두 개와 마지막 구축함의 오른쪽 모서리 두 개에 경계 반경을 지정할 수 있습니다. theazureshadow에서 제안한대로 first-child및 last-child선택기를 사용할 수 있지만 이전 버전의 IE에서는 제대로 지원되지 않을 수 있습니다. 단지 같은 클래스를 정의하는 것이 더 쉬울 수 있습니다 .first-column그리고 .last-column이 목적을 제공 할 수 있습니다.
여기에서 어떤 크레딧도 받으려고하지 않고 모든 크레딧은 @theazureshadow에게 답장을 보내지 만 개인적으로 첫 번째 행의 셀 <th>대신 일부가있는 테이블에 맞게 조정해야했습니다 <td>.
여러분 중 일부가 @theazureshadow의 솔루션을 사용하려는 경우를 대비하여 수정 된 버전을 여기에 게시하고 있지만 저처럼 <th>첫 번째 <tr>. "reportTable"클래스는 테이블 자체에만 적용하면됩니다. :
table.reportTable {
border-collapse: separate;
border-spacing: 0;
}
table.reportTable td {
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable td:last-child {
border-right: solid gray 1px;
}
table.reportTable tr:last-child td{
border-bottom: solid gray 1px;
}
table.reportTable th{
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable th:last-child{
border-right: solid gray 1px;
border-top-right-radius: 10px;
}
table.reportTable th:first-child{
border-top-left-radius: 10px;
}
table.reportTable tr:last-child td:first-child{
border-bottom-left-radius: 10px;
}
table.reportTable tr:last-child td:last-child{
border-bottom-right-radius: 10px;
}필요에 맞게 패딩, 반경 등을 자유롭게 조정하십시오. 사람들을 돕는 희망!
테이블, trs 및 tds에 테두리 반경을 추가하는 것이 최신 버전의 Chrome, FF 및 IE에서 100 % 작동하지 않는 것 같습니다. 대신 내가하는 일은 테이블을 div로 감싸고 그 위에 테두리 반경을 두는 것입니다.
<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>
.tableWrapper {
border-radius: 4px;
overflow: hidden;
}테이블이 아닌 경우 width: 100%래퍼를 만들 수 float: left있습니다.
border-collapse : seperate를 사용하십시오. 및 border-spacing : 0; 그러나 td에 대해 border-right 및 border-bottom을 사용하고 border-top은 th에 적용하고 border-left는 tr td : nth-child (1)에만 적용합니다.
그런 다음 모서리 tds에 테두리 반경을 적용 할 수 있습니다 (n 번째 자식을 사용하여 찾을 수 있음).
https://jsfiddle.net/j4wm1f29/
<table>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</table>table {
border-collapse: seperate;
border-spacing: 0;
}
tr th,
tr td {
padding: 20px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
tr th {
border-top: 1px solid #000;
}
tr td:nth-child(1),
tr th:nth-child(1) {
border-left: 1px solid #000;
}
/* border radius */
tr th:nth-child(1) {
border-radius: 10px 0 0 0;
}
tr th:nth-last-child(1) {
border-radius: 0 10px 0 0;
}
tr:nth-last-child(1) td:nth-child(1) {
border-radius: 0 0 0 10px;
}
tr:nth-last-child(1) td:nth-last-child(1) {
border-radius: 0 0 10px 0;
}모든 답변이 너무 깁니다. border를 속성으로 허용하는 테이블 요소에 테두리 반경을 추가하는 가장 쉬운 방법은 overflow : hidden으로 테두리 반경을 수행하는 것입니다.
border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;