CSS样式让表格边框变细再给定一个边框颜色。_IT百科

我喜欢用CSS+DIV，代码整洁易修改，易控制，而且代码可以跟HTML标签分离，放到一个独立的文件夹中，可以被多个页面同时引用。CSS代码：<style type="text/css">

{

margin:0px;

padding:0px;

font-size:18px;

}

#user{

height: 20px;

width: 150px;

}

#pwd {

height: 20px;

width: 150px;

margin-left: 17px;

}

#cont {

height: auto;

width: 300px;

background-color:#feccff;

margin:50px auto;

}

form{

display:block;

padding:5px;

border: 1px solid #090;

}

center input{

font-size:16px;

}

</style> HTML代码：<div class="cont" id="cont">

用户名：<input id="user" name="user" type="text" value="" />

密码：<input id="pwd" name="pwd" type="password" />

</form>

</div>

1、新建一个html文件，命名为testhtml，用于实现点击隐藏表格指定列的功能。

2、在testhtml页面，使用table标签创建四行三列的表格，<caption></caption>作为标题，下面将给它绑定点击事件，实现点击隐藏价格列。

3、使用css美化表格，设置表格的边框、字体大小、对齐方式、内边距等样式，代码如下。

4、使用js中的windowonload方法，在页面加载的时候执行function函数，下面将在function函数内实现隐藏表格列逻辑。

5、使用js中的documentgetElementsByTagName()方法获得表格对象，并赋值给tab变量，用于下面获得表格内的caption对象。

6、最后在浏览器运行testhtml文件，当点击“隐藏价格”时，把价格列隐藏，实现在table表格中使用js隐藏指定列的功能。

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

<head>

/不要使用标签名作为类名/

/table{text-align:center;width:100%;height:100%;border-width:thin;border-style:solid;border-color:#AA9FFF;border-collapse:separate;}/

tbClass {

text-align:center;

width:100%;height:100%;

/首先对大表格加上左边和底边/

/我自作主张加上了底边框，可以删掉去/

/听说FF下不支持缩写，请你自己把下面的写法拆分出来/

border-left:2px #AA9FFF solid; / 左边框 /

border-bottom:2px #AA9FFF solid; /底边框/

}

tbClass td {/单元格的上边和右边/

border-top:2px #AA9FFF solid;

border-right:2px #AA9FFF solid;

}

tbClass td {/测试用，为了看到效果，你可以把这个删掉去/

/width:100px; height:80px;/

}

/专门为“盒子那行写的类”/

boxCell td { height:101px; padding:0; margin:0}

</style>

</head>

<body>

<php

for($i=1;$i<=1000;$i++){

if($i%5==0){

echo "<td>$i</td>";

echo "</tr>

</tr>

";/////注意！这里使用了一个boxCell的CSS类，不会那么多冗余代码

echo "<tr>";

}else{

echo "<td>$i</td>";

}

</table>

</body>

</html>

//////最后说明；

1。如果乱码，或无显示，请注意你php文件的编码格式，或在浏览器下选择GBK32编码

2。这种专业问题，如果到Csdn 里发帖，十分钟之内就有人回答了

3。百度的BUG：回复后再修改，就不能保持代码的缩进了 -_-!即不能tab缩进，要换成4个空格

以手机、平板等移动设备为平台的浏览行为变得越来越平常，甚至有些人叫嚣PC将死。虽然说的有些夸张，但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要。这种网页布局就是“自适应布局”(有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化)。这种布局的特点是使用CSS媒体查询语句(@media screen and () )，能根据页面宽度，让页面布局自动做相应的调整，而不是采用传统的做法，几种不同的尺寸就做几个相适应的页面。

今天要说的是自适应布局技术中的一个难题，就是，如何让table元素也能表现出自适应性。按HTML5的说法，table是一个不鼓励使用的HTML标记，但现实工作中，我们避免不了的偶尔会用到它。那么，怎样让一个传统的表格也表现出自适应性呢

网上有很多种解决方案，最常见的是配合JavaScript。css-tricks里给出了一个用纯CSS实现的，但它需要将一些业务数据写在CSS里。而本文这将提到的一种方法也是用纯CSS实现表格的自适应布局，而且CSS只负责表现，不牵涉业务逻辑和数据。

查看演示

假设一种需求，用一个表格来展示付款数据。下面是我们使用的表格和数据：

table

thead

th支付/th

th日期/th

th金额/th

th周期/th

/tr

/thead

tbody

td data-label=

支付

支付 #1/td

td data-label=

日期

02/01/2015/td

td data-label=

对table设置css样式边框，分为几种情况：1、只对table设置边框2、对td设置边框3、对table和td技巧性设置表格边框4、对table和td设置背景，实现完美表格边框例如：table-a table{border:1px solid #F00}

圆角的边框需要css2支持，而现在大都浏览器不能用css2，

css1要达到圆角可以用（很麻烦）：

div#nifty{margin:0}

divrtop {display:block;background:#fff}

divrtop div {display:block;height:1px;overflow:hidden}

divr1{margin:0 5px}

divr2{margin:0 3px}

divr3{margin:0 2px}

divrtop divr4 {margin:0 1px;height:2px}

</style>

</div>

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

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

CSS样式让表格边框变细再给定一个边框颜色。

发表评论

评论列表（0条）

CSS样式 让表格边框变细 再给定一个边框颜色。

发表评论

评论列表（0条）

CSS样式让表格边框变细再给定一个边框颜色。