누구든지 우리가 좋아하는 스타일로 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– 그것은이 무시됩니다.
답변
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이 목적을 제공 할 수 있습니다.
답변
Opera 에 따르면 CSS3 표준은 border-radiusTD에서 의 사용을 정의하지 않습니다 . 내 경험으로는 Firefox와 Chrome이 지원하지만 Opera는 지원하지 않습니다 (IE에 대해 모릅니다). 해결 방법은 td 콘텐츠를 div에 래핑 한 다음을 div에 적용하는 border-radius것입니다.
답변
여기에서 어떤 크레딧도 받으려고하지 않고 모든 크레딧은 @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;
}필요에 맞게 패딩, 반경 등을 자유롭게 조정하십시오. 사람들을 돕는 희망!
