Home > Article > Web Front-end > Two tables in one html set two styles but apply the same_html/css_WEB-ITnose
Two tables in one html set two styles but apply the same_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:16:391555browse
代码如下：
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7表格6e916e0f7d1e588d4f442bf645aedb2f
46d5fe1c7617e3914f214aaf043f4ccf
#dc table {
border: 1px solid #0F0;
}
#dc tr,th,td {
border: 1px solid #0F0;
}
#cd {
margin-top: 20px;
}
#cd table {
border-collapse: collapse;
}
#cd table tr,th,td {
border: 1px solid #F00;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
123753e672dc9af2d303731a6e69d5e2
f5d188ed2c074f8b944552db028f98a1
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c这个表格是绿色边框b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c这个表格是绿色边框b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
19c7dfe18c057ffb252aab4564715b2f
f5d188ed2c074f8b944552db028f98a1
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e这个表格是红色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e这个表格是红色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c这个表格是红色边框b90dd5946f0946207856a8a37f441edf
b6c5a531a458a2e790c1fd6421739d1c这个表格是红色边框b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
这是效果图：
回复讨论(解决方案)
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#dc table {
border: 1px solid #0F0;
}
#dc tr,th {
border: 1px solid #0F0;
}
#cd {
margin-top: 20px;
}
#cd table {
border-collapse: collapse;
}
#cd table tr,td {
border: 1px solid #F00;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
123753e672dc9af2d303731a6e69d5e2
f5d188ed2c074f8b944552db028f98a1
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
b4d429308760b6c2d20d6300079ed38e这个表格是绿色边框01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
16b28748ea4df4d9c2150843fecfba68
85c50241f0eb8741742bfaba3ddacd81
f5d188ed2c074f8b944552db028f98a1
a34de1251f0d9fe1e645927f19a896e8
td>This table has a red borderb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
;This table has a red borderb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
Understand the usage of CSS compound selector. Take a look at the two pieces of code above.
#dc table tr td,#dc table tr th{border: 1px solid #0F0;}#cd table tr td,#cd table tr th{border: 1px solid #F00;} #dc tr,th,td { border: 1px solid #0F0;
} #cd table tr,th,td {
border: 1px solid #F00;
}
Your two selectors actually select 3 each, one is #dc tr, one is th and one is td
CSS code?1234567#dc table tr td,# dc table tr th{border: 1px solid #0F0;}#cd table tr td,#cd table tr th{border: 1px solid #F00;}
Understand the usage of CSS compound selector. Take a look at the two pieces of code above.
The second one means the same as the first one It's the same, but the ID is different. Do you understand me correctly?
What you want to tell me is that my compound selector is written incorrectly? #dc tr,td,th{border......} Is this incorrect?
Well, I have figured it out. It is indeed a writing error. The compound selector under the same ID needs to be written like this: #dc th, #dc td {border...} is correct. Special thanks to 2nd floor and 3rd floor. Correction from my friend! Thank you also, friend on the 1st floor, haha, but your code treats the symptoms but not the root cause. You just write the first table as th and the second table as td. Although the table effect is achieved, the first table is all Header, it’s not the final result I want
Well, I figured it out. It’s indeed a writing error. The compound selector under the same ID needs to be written like this: #dc th, #dc td {border… ...} is correct. Special thanks to friends on the 2nd and 3rd floors for their corrections! Thank you also, friend on the 1st floor, haha, but your code treats the symptoms but not the root cause. You just write the first table as th and the second table as td. Although the table effect is achieved, the first table is all Header, it’s not the final result I want
You’re welcome hehe