(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>
展开
 我来答
百度网友1375adc
推荐于2016-05-17 · TA获得超过1168个赞
知道小有建树答主
回答量:407
采纳率:0%
帮助的人:444万
展开全部
用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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员,对于Word文档生成PPT的操作,我们有以下建议:1. 使用另存为功能:在Word中编辑完文档后,点击文件->另存为,选择PowerPoint演示文稿(*.pptx)格式,即可将文档内容转换为PPT... 点击进入详情页
本回答由博思aippt提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式