테이블 행에 테두리 반경을 추가하는 방법

테이블 행에 테두리 반경을 추가하는 방법

---

누구든지 우리가 좋아하는 스타일로 tr을 스타일링하는 방법을 알고 있습니까?

나는 테이블에 border-collapse를 사용했고, 그 후 tr은 1px 단색 테두리를 표시 할 수 있습니다.

그러나 시도했을 때 -moz-border-radius작동하지 않습니다. 단순한 여백도 작동하지 않습니다.

---

테두리 반경은 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-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- 그것은이 무시됩니다.

http://jsfiddle.net/Exe3g/

---

이 경우 국경을 무너 뜨리는 것은 잘못된 일이라고 생각합니다. 그것들을 접는 것은 기본적으로 두 개의 인접한 셀 사이의 경계가 공유된다는 것을 의미합니다. 즉, 반경이 주어진 경우 어느 방향으로 커브를해야하는지 명확하지 않습니다.

Instead, you can give a border radius to the two lefthand corners of the first TD and the two righthand corners of the last one. You can use first-child and last-child selectors as suggested by theazureshadow, but these may be poorly supported by older versions of IE. It might be easier to just define classes, such as .first-column and .last-column to serve this purpose.

---

According to Opera the CSS3 standard does not define the use of border-radius on TDs. My experience is that Firefox and Chrome support it but Opera does not (don't know about IE). The workaround is to wrap the td content in a div and then apply the border-radius to the div.

---

Not trying to take any credits here, all credit goes to @theazureshadow for his reply, but I personally had to adapt it for a table that has some <th> instead of <td> for it's first row's cells.

I'm just posting the modified version here in case some of you want to use @theazureshadow's solution, but like me, have some <th> in the first <tr>. The class "reportTable" only have to be applied to the table itself.:

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

Feel free to adjust the paddings, radiuses, etc to fit your needs. Hope that helps people!

---

I found that adding border-radius to tables, trs, and tds does not seem to work 100% in the latest versions of Chrome, FF, and IE. What I do instead is, I wrap the table with a div and put the border-radius on it.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

If your table is not width: 100%, you can make your wrapper float: left, just remember to clear it.

---

The tr element does honor the border-radius. Can use pure html and css, no javascript.

JSFiddle link: 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>

---

Or use box-shadow if table have collapse

참고URL : https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row