CSS를 사용하여 테두리 색상이 다른 HTML 외부 및 내부 표

다른 표 안에 HTML 표가 있습니다. 두 테이블의 스타일은 CSS에서 정의됩니다. 테두리 색이 다른 안쪽과 바깥 쪽 테이블을 원합니다. 그러나 어떻게 든 내부 테이블은 외부 테이블의 테두리 색을 취하고 있습니다. 아래 코드는 -CSS를 사용하여 테두리 색상이 다른 HTML 외부 및 내부 표

HTML :

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="common.css"> 
</head> 
<body> 
    <table width="100%" class="OuterTableStyle1"><tr><td> 
    <table width="100%" class="CommonTableStyle1" > 
      <tr> 
       <th>Title 1</th> 
       <th>Title 2</th> 
      </tr> 
      <tr> 
       <td>Data 1</td> 
       <td>Data 2</td> 
      </tr> 
    </table> 
    </td></tr></table> 
</body> 
</html>

CSS :

/*======= Start : Common data table style =========*/ 
table.CommonTableStyle1 td 
    { 
    vertical-align:middle; 
    padding:5px; 
    font-size:11px; 
    font-family:Arial; 
    font-weight:normal; 
    color:#000000; 
    } 

table.CommonTableStyle1 th, table.CommonTableStyle1 td 
    { 
    border: 1px solid #525272 ; 
    } 

table.CommonTableStyle1 
    { 
    border-collapse:collapse; 
    } 
/*======= End : Common data table style =========*/ 


/*=== Start : This table is used as border of another scrollable table ===*/ 
table.OuterTableStyle1 
    { 
    border-collapse:collapse; 
    } 
table.OuterTableStyle1 th, table.OuterTableStyle1 td 
    { 
    border: 1px solid red; 
    } 
/*=== End : This table is used as border of another scrollable table ===*/

이 도와주세요.

[편집 CSS]

/*======= Start : Common data table style =========*/ 
table.CommonTableStyle1 td 
    { 
    vertical-align:middle; 
    padding:5px; 
    font-size:11px; 
    font-family:Arial; 
    font-weight:normal; 
    color:#000000; 
    } 

table.CommonTableStyle1 th, table.CommonTableStyle1 td 
    { 
    border: 1px solid #525272 ; 
    } 

table.CommonTableStyle1 
    { 
    border-collapse:collapse; 
    } 
/*======= End : Common data table style =========*/ 


/*=== Start : This table is used as border of another scrollable table ===*/ 
table.OuterTableStyle1 
    { 
    border-collapse:collapse; 
    border: 1px solid red; 
    } 
/*=== End : This table is used as border of another scrollable table ===*/

출처

2013-07-27 Kartic

선택기 클래스 "CommonTableStyle1"와 함께 테이블에 테이블이 없기 때문에

table.CommonTableStyle1 table, th, td

가 제대로 작동하지 않습니다.

나는이 작업을 수행하는 의미 생각 :

table.CommonTableStyle1 th, table.CommonTableStyle1 td

는 또한 fiddle

참조, 맨 밑의 선택이 아니라 당신이 생각하는 방식으로 작업을했다. th, td 부분은 위의 것과 동일한 특이성을 가지므로 나중에 모두 제공되기 때문에 모든 th 및 td에 대해이 스타일을 사용합니다. 그러나 우리가 위의 하나의 특이성을 더 크게 만들었으므로 지금은 괜찮습니다.

출처

2013-07-27 11:37:32

안녕하세요. Mr. Lister, 당신의 대답이 저에게 효과적이었습니다. 하지만 내 질문에 표시된대로 코드를 변경하면 다시 똑같은 일이 발생합니다. 이 문제를 해결하도록 도와 주시겠습니까? – Kartic

수정 된 CSS 섹션의 코드가 작동했습니다. 내 실수를 지적 해 주신 Mr. Lister에게 감사드립니다. – Kartic

CSS를 사용하여 테두리 색상이 다른 HTML 외부 및 내부 표

답변

관련 문제