用如何控制网页中的多个表格的显示?
外部css:
body {
margin: 2px;
padding: 2px;
font-family: Verdana, sans-serif, "宋体";
font-size: small;
text-align:center;
background: #FC9;
}
table{
border-collapse:collapse;
margin: 0, auto
position: relative;
top: 0px;
left: 0px;
}
#content {
margin:0;
padding:10px;
font-size: 95%;
text-align:left;
vertical-align: top;
line-height: 1.5em;
background:#FFF;
border-left:#DDF4FF solid 2px;
}
#sidebar {
width: 20%;
vertical-align:top;
}
#sidebar table{margin: 0 auto;
}
#sidebar table th,td{
text-align: center;
border:0px;
height:23px;
}
#content table{
border-collapse:collapse;
position: relative;
top: 0px;
left: 0px;
border:1px solid #000;
margin: 0 auto;
}
#content table th,td{
border:1px solid #000;
}
网页:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link rel="stylesheet" href="main.css" type="text/css">
<title>测试</title>
</head>
<body>
<div id="subject">
<table border="1" align="center" width="100%">
<tr>
<td width="20%" id="sidebar" >
<table width="80%">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="80%" id="content">
<table width="80%" >
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
现在想让id="sidebar"中的表格的不显示边框,id="content"的表格显示,但css不起作用?为什么?怎么改?
请大家帮忙!不胜感激~
------解决方案--------------------#content table{。。};
#content table th,td{....}
想问一下你这些是什么写法啊
------解决方案--------------------
#sidebar table th,#sidebar table td{
------解决方案--------------------解决的方法:
1)给content 下面的那个table 的td 加一个class,例如:class="con"
2)把全局样式的
#content table th,td{
border:1px solid #000;
} 修改为:
#content table th,td.con{
border:1px solid #000;
}
这样就可以达到你想要的结果了~
------解决方案--------------------补充: html代码
<table border="1" align="center" width="100%">
<tr>
<td width="20%" id="sidebar" ><table width="80%">
<tr>
<td> </td>
</tr>
<tr>
<td > </td>