CSS 둥근 테두리

나는이 빈에서 다양한 하위 요소와 테이블에 둥근 모서리를 얻기 위해 노력하고 있어요

나는 둥근 모서리를 가지고 음영 배경을 얻을 수 있지만, 내가 아무것도에 영향을 미칠 것 같다 경계선. 나는 smae 것을 요구하는 것처럼 보이는 몇몇 다른 질문을 읽었다, 그러나 응답의 아무도는 저를 위해 작동하지 않는다.

이것은 내가 지금 얻고있는 것입니다. caption 요소는 정상적으로 작동하지만 thead, tbody 또는 tfoot은 작동하지 않습니다. 나는 각 요소에 대해 border을 개별적으로 설정하려했지만 그 중 아무 것도 모서리가 둥글게되지 않았습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <table> 
    <tbody> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
    </tbody> 
    </table> 

    <table> 
    <thead> 
     <tr> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
    </tbody> 
    </table> 

    <table> 
    <caption>Caption</caption> 
    <tbody> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
    </tbody> 
    </table> 

    <table> 
    <caption>Caption</caption> 
    <thead> 
     <tr> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
     <tr><td>Cell 1</td><td>Cell 2</td></tr> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
     <th>Footer 1</th> 
     <td>Footer 2</td> 
     </tr> 
    </tfoot> 

    </table> 

</body> 
</html>

그리고 CSS : 여기

Current output

는 HTML입니다

/* Basic styling */ 
table { 
    margin-bottom: 15px; 
    border-collapse: collapse; 
} 
caption { background-color: green; } 
thead { background-color: blue; } 
tbody { background-color: lightgray; } 
tfoot { background-color: magenta; } 
th, td, caption { padding: 4px; } 

/* Radius */ 
table > :first-child, 
table > :first-child > tr:first-child > td:first-child, 
table > :first-child > tr:first-child > th:first-child { 
    border-top-left-radius: 10px; 
} 

table > :first-child, 
table > :first-child > tr:first-child > td:last-child, 
table > :first-child > tr:first-child > th:last-child { 
    border-top-right-radius: 10px; 
} 

table > :last-child, 
table > :last-child > tr:last-child > td:first-child, 
table > :last-child > tr:last-child > th:first-child { 
    border-bottom-left-radius: 10px; 
} 

table > :last-child, 
table > :last-child > tr:last-child > td:last-child, 
table > :last-child > tr:last-child > th:last-child { 
    border-bottom-right-radius: 10px; 
} 

/* Borders */ 

table > * { 
    border: 2px solid darkred; 
}

출처

2014-11-12 aquavitae

시도하십시오 국경과 국경 반경을 thead와 tfoot 또는 tbody에 추가하십시오. tfoot가 존재하지 않으면 – UnskilledFreak

나는 이미 그것을 시도했습니다. 작동하지 않습니다. – aquavitae

보십시오이 CSS를 사용하는

* { border-collapse: separate; }

border-radius은 W3C.org 사양으로 인해과 작동하지 않습니다.

출처

2014-11-12 13:16:03 pbaldauf

'border-collapse : separate'는 각 셀 사이에 큰 간격을 두었습니다. 그때? – aquavitae

u는 'border-spacing : 0px'를 사용하여 간격을 막을 수 있습니다. – UnskilledFreak

.. 당신이 정말로 결과 아래에 대한 요구한다면, 난 잘 모르겠어요하지만 자신의 목적

table { 
    border-image: none; 
    border:5px solid red; 
    border-top:0 none; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    }

내가 찍은 결과를 위해 CSS처럼 아래에 추가로

enter image description here

출처

2014-11-12 13:26:56

게시하기 전에 직접 시도하십시오. – aquavitae

CSS 둥근 테두리

답변

관련 문제