文章类型: HTML
关键词: 表格,table,细边框,border
内容摘要: 介绍几种设置Table的细边框的几种方式

用CSS设置表格Table的细边框的比较好用的方法

2015/7/14 17:29:35    来源:apple    阅读:

在HTML制作页面中,大家经常会发现Table的BORDER设置为1,得到的边框却不是想要的1个像素的细边框,于是很多人去想方设法做出细边框的效果。

设置Table的细边框通常有这么几种方式: 

1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛! 

再来看看第二种方法:

2、设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。 

今天在实践过程中发现,以上两种方式生成的HTML在Word中打开则发生问题,不能达到预期效果。怎么办呢!? 

下面介绍一种更为简便有效的方法: 

3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。 

我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。 

示例: 

<!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=gb2312" />
		<title>导航页档</title>
		<style type="text/css"> 
			table { border-collapse: collapse; border: none; width: 200px; } 
			td { border: solid #000 1px; }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td> 军事 </td>
				<td> 历史 </td>
				<td> 新闻 </td>
			</tr>
			<tr>
				<td> 军事 </td>
				<td> 历史 </td>
				<td> 新闻 </td>
			</tr>
		</table>
	</body>
</html>

提示:您可以先修改部分代码再运行


↑ 上一篇文章:JavaScript 和 .NET 中的 JSON 关键词:js,JavaScript,.net,C#,json 发布日期:2015/7/14 17:26:00
↓ 下一篇文章:html标签及CSS样式汇总 关键词:css,html,网页制作 发布日期:2015/7/14 17:31:35
相关文章:
实现跨多个表格的数据进行组合的SQL语句 关键词:table,表格,数据,SQL,join 发布日期:2015-07-29 14:35
动态实现图片的上传删除等 关键词:.net,C#,html,js,javascript,table,tr,td,插入tr,td,id 发布日期:2015-07-28 17:03
查找文章的相关文章的思路分析及实现 关键词:.net,C#,SQL,server,Data,Table,Dictionary按值排序,Arr.. 发布日期:2015-07-14 15:47
相关目录:.NETHTMLJAVA
我要评论
正在加载评论信息......