Bảng bên trong bảng với các kiểu khác nhau?

Question

Làm cách nào để tạo hai kiểu khác nhau cho hai ô bảng bảng mà một ô của chúng nằm bên trong một bảng khác?

Tôi có hai phong cách css:

table.style1 { /* any styles */} 
table.style1 td { /* any styles */} 

và

table.style2 { /* any styles */} 
table.style2 td { /* any styles */ } 

Trong mã tôi đã somting như thế này:

<table class="style1"> 
    <tr> 
     <td> 
     <table class="style2"> 
      <tr><td>bla bla<td></tr> 
     </table> 
     </td> 
    <tr> 
</table> 

và kết quả là - tất cả các <td> ô trong bảng trong bảng thứ hai (với style2) là với style1 ...!

Làm thế nào để tạo hai css stile khác nhau, khi tôi có bảng bên trong bảng?

Answer 1

Bạn có thể làm theo mã dưới đây

Đối với Bảng 1

bảng .style1 {/ * bất kỳ phong cách * /}

bảng .style1 td {/ * bất kỳ phong cách * /}

Đối với Bảng 2

bảng .style1 .style2 {/ * bất kỳ phong cách * /}

bảng .style1 .style2 td {/ * bất kỳ phong cách * /}

Answer 2

Hãy thử mã này. Tôi chắc chắn nó hoạt động tốt.

table.style1 { /* any styles */} 

table.style1 td { /* any styles */} 

và

table.style1 table.style2 { /* any styles */} 

table.style1 table.style2 td { /* any styles */} 

Answer 3

Dưới đây là một cách để chọn các ô bảng khác nhau http://jsfiddle.net/HR8Bg/2/

.style1 td { 
    background: blue; 
    color: #fff; 
} 

.style1 td td { 
    background: red; 
}