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

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

示例代码：

======================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<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 traltrow{

background-color:#c7e5ff;

}

</style>

</head>

<body>

<caption>净值和收益率表</caption>

<tr>

<th scope="col" >理财产品aaaaa</th>

</tr>

<tr>

<th scope="col">单位累计净值</th>

<th scope="col">单位累计净值增长率</th>

</tr>

</tr>

<td>girlwing</td>

</tr>

<td>tastestory</td>

<td>Sagittarius</td>

</tr>

</table>

<div>

</body>

</html>

1上边框宽度以下是引用片段：

语法: ‌‌border-top-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。

2右边框宽度以下是引用片段：

语法: border-right-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。

3下边框宽度以下是引用片段：

语法: border-bottom-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。

4左边框宽度以下是引用片段：

语法: border-left-width: <值>

允许值: thin | medium | thick | <长度>

初始值: medium

适用于: 所有对象

向下兼容: 否

左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。

不允许使用负值。也可以用在左边框、边框的宽度或边框的属性略写。

5边框宽度以下是引用片段：

语法: border-width: <值>

允许值: [ thin | medium | thick | <长度> ]{1,4}

初始值: 未定义

适用于: 所有对象

向下兼容: 否

边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。不允许使用负值长度。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。

也可以使用略写的边框属性。

6边框颜色以下是引用片段：

语法: border-color: <值>

允许值: <颜色>{1,4}

初始值: 颜色属性的值

适用于: 所有对象

向下兼容: 否

边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。

也可以使用略写的边框属性。

7边框样式以下是引用片段：

语法: border-style: <值>

允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}　

初始值: none　

适用于: 所有对象　

向下兼容: 否　

边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等。也可以使用略写的边框属性。

以下是引用片段：　　none：无样式；　dotted：点线；　dashed：虚线；　solid：实线；　double：双线；　groove：槽线；　ridge：脊线；　inset：内凹；　outset：外凸

8上边框以下是引用片段：　　

语法: border-top: <值>

允许值: <上边框宽度> || <边框式样> || <颜色>　

初始值: 未定义　

适用于: 所有对象　

向下兼容: 否　

上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。

注意只能给出一个边框式样。也可以使用略写的边框属性。

9右边框　　

语法: border-right: <值>　

允许值: <右边框宽度> || <边框式样> || <颜色>　

初始值: 未定义　　

适用于: 所有对象　　

向下兼容: 否　　

右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。

注意只能给出一个边框式样。也可以使用略写的边框属性。

10下边框以下是引用片段：　　

语法: border-bottom: <值>　

允许值: <下边框宽度> || <边框式样> || <颜色>　

初始值: 未定义　

适用于: 所有对象　

向下兼容: 否　

下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。

注意只能给出一个边框式样。也可以使用略写的边框属性。

11左边框以下是引用片段：　　

语法: border-left: <值>　

允许值: <左边框宽度> || <边框式样> || <颜色>　

初始值: 未定义　

适用于: 所有对象　

向下兼容: 否　

左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。注意只能给出一个边框式样。也可以使用略写的边框属性。下面的细线表格是用cellspacing来实现的，用表格的背景色做为边框的颜色。

不方便的是每一行都要再设置一个背景色。

下面的是代码1，也就是在你原代码中，加上<style> 里的代码就可以了

（最后有用纯CSS写的代码）：

<html>

<head>

<style>

table{height:500px;border:none;}

td{border:1px solid #f00;}

td[colspan="10"]{border:none;}

</style>

</head>

<body>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

第二代码：

<html>

<head>

<style>

table{height:500px;border-collapse:collapse;}

td{border:1px solid #f00;border-spacing:0;padding:0;margin:0;}

l1{width:430px;border:none;}

t75{width:75px;}

t60{width:60px;}

t80{width:80px;}

</style>

</head>

<body>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

第一行是网页语言编码声明编码标准就是utf-8,可以用别的比如简体中文是gb2312 utf-8是国际通用的

第二行是 css 中注释这里的意思是告诉你这是css文档

在/ / 中间的内容你可随便打,浏览器是忽略的,是给人看的

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

{margin:0;padding:0;}

tdemo{width: 600px;height: 400px;margin:100px auto;}

ttitle{background:#dfdfdf;height:50px;text-align:center;}

tcontent{background:#eee;height:300px;}

cnt{padding:20px 25px;}

cnt p{line-height:25px;font-size:15px;color:#222;}

tcontent h6{text-indent:25px;font-size:16px;color:#111;}

tcontent plast{text-indent:25px;}

tfoot{background:#aaa;height:50px;}

tfoot button{width: 60px;height: 28px;float: right;margin-right: 30px;}

</style>

</head>

<body>

<td>

</td>

</tr>

<td>

<p>1一只羊在吃草，一只狼从旁边经过没有吃羊。</p>

<p>2又一只狼经过，还是没有吃羊。</p>

<p>3第三只狼经过，羊冲狼大叫，狼还是没有吃羊。</p>

</div>

</td>

</tr>

<td>

</td>

</tr>

</table>

var showzone=documentgetElementById("time");

var time=new Date();

var yy=timegetFullYear();

var mm=timegetMonth()+1;

var dd=timegetDate();

var kk=timegetDay();

var xingqi;

if(kk==0){

k="星期天"

}

else if(kk==1){

xingqi="星期一";

}

else if(kk==2){

xingqi="星期二"

}

else if(kk==3){

xingqi="星期三"

}

else if(kk==4){

xingqi="星期四"

}

else if(kk==5){

xingqi="星期五"

}

else{

xingqi="星期六";

}

showzoneinnerHTML="今天是："+yy+"年"+mm+"月"+dd+"日"+xingqi+" ---欢迎你来猜一猜";

</script>

</body>

</html>

可以参考此样例：

table{width:100%;overflow-x: scroll;background-color:#7c95b5;}fixedTable{width:160%;text-align: center;color:#fff;font-size:14px; border-collapse:collapse;}fixedTable tr{line-height: 30px;border:1px solid #fff;}fixedTable tr:first-child{height:40px;line-height: 40px;background-color:cadetblue;}fixedTable td:first-child{position:absolute;width:105px;background-color:cadetblue;border:1px solid #fff;margin:-1px 0px 0px -1px;}fixedColumn{width:99px;}

<html>

<head>

<title>使用css固定table第一列</title>

</head>

<body>

</table>

</div>

</body></html>

View Code

适用移动端

转载于：wwwmdcodecn

简单表格html 文件代码清单如下：

<!doctype html>

<head>

</head>

<body>

<table>

create your own bingo card

</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

tablecss 文件代码清单如下：

table {

border: none;

border-collapse: collapse;

}

table caption {

font-size: 12em;

font-weight: bold;

}

table th {

border: 1px solid red;

width: 100px;

height: 100px;

}

table td {

border: 1px solid #000;

width: 100px;

height: 100px;

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/12163950.html

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

发表评论

评论列表（0条）