테이블 경계 반경 - 글로벌 CSS (thead 또는 tbody 선택자)

큰 사이트에 대해 일부 CSS를 다시 작성합니다. 많은 콘텐츠가 있으며 콘텐츠는 종종 다릅니다.테이블 경계 반경 - 글로벌 CSS (thead 또는 tbody 선택자)

나는 CSS 테이블에 갇혀있다.

내 새 테이블에는 둥근 테두리가 있어야합니다. 고맙게도 CSS 만 사용할 수 있습니다 (CSS7을 사용하면 우아하게 기능이 저하 될 수 있습니다). 따라서 CSS 만 사용합니다.

현장 방문 테이블이 다릅니다. 일부는 테이블 헤더를 가지고 있으며, 일부는 테이블 헤더를 가지고 있지 않습니다.

우리 모두 알다시피, border-radius는 테이블 자체에서 작동하지 않습니다. 테이블 셀 인수 여야합니다.

CSS를 작성하여 브라우저에 테이블이 있는지 여부를 인식 할 수 있도록합니다 (그리고 "table thead tr : first-child th : first-child"에 border-radius를 설정합니다). 그렇지 않으면 border-radius는 "table tbody tr : first-child td : first-child"에 대해 설정됩니까?)

시도한 간단한 간단한 작업 - "table tr : first-child td : first-child"- 내가 생각하면 가정해야하는 것처럼 - "thead th" 및 "tbody td".

가능한 해결책이 있으시면 고맙겠습니다. CSS3 솔루션만으로도 충분합니다.

출처

2013-10-10 sznowicki

"우리 모두 알고 있듯이 경계 반경이 테이블 자체에서 작동하지 않습니다"라는 의미는 무엇입니까? [it works] (http : //jsfiddle.net/fhBuS/) – Peter

또한 테이블 내부 요소에'border-radius'를 사용하지 말아야합니다. http://www.w3.org/TR/css3-background/#the-border-radius - '5.6. 테이블에 대한 효과 ' – Peter

@Peter : 글쎄, 나는 언급하지 않았다. 온 사이트의 모든 테이블은 국경이 무너졌다. 오해의 소지가 있습니다. – sznowicki

당신은 일 태그를 계산하고이 예는 이미 테이블에 ID/클래스의 형태를 가정 어떤 ...

var thCount = $("#theTable tr th").length; 

    if (thCount > 0){ 
    $("#theTable").addClass("roundCorners"); 
    //adds a class to the table so you can make round corners 
    }

를 발견하는 경우 테이블에 클래스를 설정하는 jQuery를 사용할 수 있습니다, 필요에 따라 변경하고 CSS를 사용해야합니다.

출처

2013-10-10 19:25:35

테이블 경계 반경 - 글로벌 CSS (thead 또는 tbody 선택자)

답변

관련 문제