(html，css相关)怎样设置使表格（table）第一行深蓝色的两列填满第一行？（代码如下）

表格有四列，就是想让第一行只分成两列显示。————————————————————————————————<!DOCTYPEhtmlPUBLIC"-//W3C//DTDX... 表格有四列，就是想让第一行只分成两列显示。
————————————————————————————————

<!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>
<title>上海********有限公司</title>
<style>
body{
background-color:#ffffff;
}
#container
{
margin:0 auto;
width:936px;
}

.datalist{
text-align:center;
border:1px solid #0058a3;
font-family:宋体;

border-collapse:collapse;
background-color:#eaf5ff;
font-size:16px;
}
.datalist caption{
padding-bottom:7px;
padding-top:10px;
font-family:黑体;
text-align:center;
font-size:20px;
}
.datalist th{
border:1px solid #0058a3;/* 行名称边框 */
background-color:#4bacff; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:normal;
padding-top:9px; padding-bottom:6px;
padding-left:15px; padding-right:15px;
text-align:center;
}
.datalist td{
border:1px solid #0058a3; /* 单元格边框 */
text-align:center;
padding-top:3px; padding-bottom:3px;
padding-left:7px; padding-right:7px;
}
.datalist tr.altrow{
background-color:#c7e5ff;
}
</style>
</head>
<body>
<div id="container">
<table class="datalist" summary="净值和收益率表格">
<caption>净值和收益率表</caption>
<tr>
<th scope="col">理财产品aaaaa</th>
<th scope="col">成立日期:2009年3月8日</th>
</tr>
<tr>
<th scope="col">公布日期</th>
<th scope="col">单位净值</th>
<th scope="col">单位累计净值</th>
<th scope="col">单位累计净值增长率</th>
</tr>
<tr> 
<td>2010年4月2日</td>
<td>1.04913</td>
<td>1.04913</td>
<td>4.913%</td>
</tr>
<tr class="altrow"> 
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>50%</td>
</tr>
<tr> 
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
</tr>
</table>
<div>
</body>
</html> 展开

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

百度网友1375adc
推荐于2016-05-17 · TA获得超过1168个赞

知道小有建树答主

回答量：407

采纳率：0%

帮助的人：446万

我也去答题访问个人页

关注

展开全部

用colspan="3"来制定某一列的跨度。

示例代码：
======================
<!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>
<title>上海********有限公司</title>
<style> 
 body{
 background-color:#ffffff; 
}
#container
 {
     margin:0 auto;
  width:936px;
  }
  
.datalist{
 text-align:center;
 border:1px solid  #0058a3;
 font-family:宋体; 
  
 border-collapse:collapse;  
 background-color:#eaf5ff; 
 font-size:16px;
}
.datalist caption{
 padding-bottom:7px;
 padding-top:10px;
 font-family:黑体;
 text-align:center;
 font-size:20px;
}
.datalist th{
 border:1px solid #0058a3;/* 行名称边框 */
 background-color:#4bacff; /* 行名称背景色 */
 color:#FFFFFF;    /* 行名称颜色 */
 font-weight:normal;
 padding-top:9px; padding-bottom:6px;
 padding-left:15px; padding-right:15px;
 text-align:center;
}
.datalist td{
 border:1px solid #0058a3; /* 单元格边框 */
 text-align:center;
 padding-top:3px; padding-bottom:3px;
 padding-left:7px; padding-right:7px;
}
.datalist tr.altrow{
 background-color:#c7e5ff; 
}
</style>
</head>
<body> 
<div id="container">
<table class="datalist" summary="净值和收益率表格">
 <caption>净值和收益率表</caption>
 <tr>
    <th scope="col" >理财产品aaaaa</th>
  <th scope="col" colspan="3">成立日期:2009年3月8日</th>
        </tr>
 <tr>
  <th scope="col">公布日期</th>
  <th scope="col">单位净值</th>
  <th scope="col">单位累计净值</th>
  <th scope="col">单位累计净值增长率</th> 
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>2010年4月2日</td>
  <td>1.04913</td>
  <td>1.04913</td>
  <td>4.913%</td>  
 </tr>
 <tr class="altrow">  <!-- 偶数行 -->
  <td>girlwing</td>
  <td>W210</td>
  <td>Sep 16th</td>
  <td>50%</td> 
 </tr>
 <tr>     <!-- 奇数行 -->
  <td>tastestory</td>
  <td>W15</td>
  <td>Nov 29th</td>
  <td>Sagittarius</td>  
 </tr>
</table>
<div>
</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起