programing

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

lastmoon 2023. 8. 20. 12:25
반응형

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

우리가 좋아하는 스타일로 옷 입는 법 아는 사람?

저는 테이블 위에서 보더 접기를 사용했고, 그 후 tr은 제가 준 1px 솔리드 보더를 표시할 수 있습니다.

제가 만지하를 때, 제노력을때했가.-moz-border-radius동작되지 않습니다.단순한 마진도 효과가 없습니다.

td에만 테두리 반지름을 적용할 수 있으며 tror table은 적용할 수 없습니다.저는 다음 스타일을 사용하여 둥근 코너 테이블에 대해 이 문제를 해결했습니다.

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

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

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

모든 공급업체 접두사를 제공해야 합니다.JSFiddle에서도 작동하는 것을 볼 수 있습니다.

행 사이의 실제 간격

이것은 오래된 스레드이지만, 저는 OP의 다른 답변의 코멘트를 읽는 것을 알아차렸습니다. 원래의 목표는 분명히 가지고 있었습니다.border-radius행과 행 사이의 간격.현재 솔루션이 정확히 그렇게 하는 것 같지는 않습니다.애즈섀도우의 대답은 올바른 방향으로 향하고 있지만, 조금 더 필요한 것 같습니다.

이러한 것에 관심이 있는 사람들을 위해 행을 구분하고 각 행에 반지름을 적용하는 피들이 있습니다. (참고: Firefox는 현재 경계 반경에 표시/클립하는 데 버그가 있습니다.)

과 같습니다( 이전 지원을 언급했듯이 한 벤더 를 사용할 수 ).border-radiusneed 추가)

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 s는 s 습그지하리고요않니다중그것은않▁'다습니.border-radius 설정되어 .table,tr또는td—무시됩니다.

http://jsfiddle.net/Exe3g/

삼원소는 경계 반지름을 존중합니다.자바스크립트 없이 순수 html과 css를 사용할 수 있습니다.

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>

Opera에 따르면 CSS3 표준은 다음의 사용을 정의하지 않습니다.border-radius로 제 지원하지 IE에 ).제 경험에 따르면 파이어폭스와 크롬은 지원하지만 오페라는 지원하지 않습니다(IE에 대해 모릅니다).해결 방법은 dd 컨텐츠를 div로 포장한 다음 적용하는 것입니다.border-radius

여기서 크레딧도 , 답변에 되지만, 저는 의 @zures shadow, @zures shadow, @zures shadow가 있는 .<th>에 <td>첫 번째 줄의 세포이기 때문입니다.

@사용하고 분들이 @azureshadow를 <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;
}

필요에 따라 패드, 반경 등을 자유롭게 조정할 수 있습니다.그것이 사람들에게 도움이 되기를 바랍니다!

아웃라인을 사용할 수도 있습니다.

table {
  border-radius: 10px;
  outline: 1px solid gray;
}

이런 경우에 국경을 무너트리는 것은 잘못된 일이라고 생각합니다.이들을 접는다는 것은 기본적으로 인접한 두 셀 사이의 경계가 공유되는 것을 의미합니다.이것은 반지름이 주어졌을 때 어느 방향으로 곡선을 그리는지 불분명하다는 것을 의미합니다.

대신 첫 번째 TD의 왼쪽 두 모서리와 마지막 TD의 오른쪽 두 모서리에 경계 반경을 지정할 수 있습니다.사용할 수 있습니다.first-child그리고.last-child선택기는 zazures shadow에서 제안한 것과 같으나 이전 버전의 IE에서는 잘 지원되지 않을 수 있습니다.다음과 같은 클래스를 정의하는 것이 더 쉬울 수 있습니다..first-column그리고..last-column이 목적을 위해

모든 답이 너무 깁니다.경계를 속성으로 받아들이는 테이블 요소에 경계 반지름을 추가하는 가장 쉬운 방법은 경계 반지름을 오버플로로 수행하는 것입니다. 숨김.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;

CSS:

tr:first-child th:first-child {
  border-top-left-radius: 70px;
  border-bottom-left-radius: 70px;
}

tr:first-child th:last-child {
  border-top-right-radius: 70px;
  border-bottom-right-radius: 70px;
}

테이블, trs, tds에 테두리 반지름을 추가하는 것은 최신 버전의 Chrome, FF, IE에서 100% 작동하지 않는 것 같습니다.대신 제가 하는 일은, 테이블을 디브로 감싸고 그 위에 테두리 반지름을 다는 것입니다.

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

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

테이블이 아닌 경우width: 100%당신은 당신의 포장지를 만들 수 있습니다.float: left그냥 기억해둬요

border-collapse:separate; 및 border-spacing:0을 사용하지만 tds에는 border-right 및 border-bottom만 사용하고 tds에는 border-top을 적용하고 trd:nth-child(1)에는 border-left를 적용합니다.

그런 다음 모서리 tds에 테두리 반지름을 적용할 수 있습니다(n번째 자식을 사용하여 tds 찾기).

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

@Craigo 답변에 따르면, 저는 약간의 변화를 가합니다, 보세요:)

      table {
        border-collapse: separate;
        border-spacing: 0 16px;
      }

      tr td {
        border: 1px solid transparent;
        transition: all ease 0.3s;
        padding: 5px;
      }

      tr td:first-child {
        border-right: 0px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      tr td:last-child {
        border-left: 0px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      tr td:not(:first-child, :last-child) {
        border-left: 0px;
        border-right: 0px;
      }

      tr:hover td:first-child {
        border-color: black;
        border-right: 0px;
      }

      tr:hover td:last-child {
        border-color: black;
        border-left: 0px;
      }

      tr:hover td:not(:first-child, :last-child) {
        border-color: black;
        border-left: 0px;
        border-right: 0px;
      }
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to add border radius on table row</title>
  </head>

  <body>
    <table>
      <tbody>
        <tr>
          <td>01</td>
          <td>02</td>
          <td>03</td>
          <td>04</td>
          <td>05</td>
          <td>06</td>
        </tr>
        <tr>
          <td>07</td>
          <td>08</td>
          <td>09</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

또는 테이블에 접힌 부분이 있는 경우 상자

box-shadow: 0 0 0 1px red;

추가할 수 없습니다.border-radius에tr그래서 당신은 그것을 첫 번째에 넣어야 합니다.td그리고 마지막으로td

처음에td당신은 왼쪽에만 테두리를 두었고 마지막에는 오른쪽에 테두리를 두었습니다.

다음을 수행합니다.

tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

다음은 단일 행에 반지름 경계를 설정하는 예입니다.

table { border-collapse: separate; border-spacing: 0; }

td { padding: 5px; }

.rowBorderStart {
  border: 1px solid #000;
  border-right: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rowBorderMiddle {
  border: 1px solid #000;
  border-left: 0px;
  border-right: 0px;
}

.rowBorderEnd {
  border: 1px solid #000;
  border-left: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td class='rowBorderStart'>2.1</td><td class='rowBorderMiddle'>2.2</td><td class='rowBorderEnd'>2.3</td></tr>
    <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
</table>

아래 코드를 사용하여 테이블 모서리를 반올림합니다.

thead th:first-child{border-top-right-radius: 15px;}

thead th:last-child{border-top-left-radius: 15px;}

tbody tr:last-child>td:first-child{border-bottom-right-radius: 15px;}

tbody tr:last-child>td:last-child{border-bottom-left-radius: 15px;}

.less 대신 .css 파일을 .less로 변경하고 다음 코드를 사용하는 것이 좋습니다.

table { 
  border-collapse: separate;
  border-spacing: 0; 
}
td {
    border: solid 1px #000;
    border-style: none solid solid none;
    padding: 10px;
}
tr td:first-child { 
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px;
}
tr td:last-child { 
  border-top-right-radius: 10px; 
  border-bottom-right-radius: 10px;
}
tr td { 
  border-top-style: solid; 
}
tr td:first-child { 
  border-left-style: solid; 
}

tr{
  cursor: pointer;
}

tr:hover{
  td{
    background-color: red;
  }
}

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

반응형

'programing' 카테고리의 다른 글

콘텐츠 보안 정책:페이지 설정이 리소스 로드를 차단했습니다.  (0) 2023.08.20
텍스트 파일로 변수 출력("echo")  (0) 2023.08.20
추가 방법추가 방법자바스크립트로?자바스크립트로?  (0) 2023.08.20
PL/SQL의 CASE 문에 스택 조건  (0) 2023.08.20
Excel VBA 코드를 사용한 조건부 포맷  (0) 2023.08.15

'programing'의 다른글

  • 현재글테이블 행에 테두리 반지름을 추가하는 방법

관련글

댓글

티스토리툴바