css&table的一个问题

noaighost 2009-07-25 08:58:38
我有一个html表格样式，为什么在第一个文件显示的table2，跟我单独提取出来的table2显示出来会有这么大的差别的？
文件一


<html> 

<head> 

<title>用css美化表格边框 </title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<style> 

.table1{border:#000000 dashed;border-width:1 0 0 1} 

.td1{border:#000000 dashed;border-width:0 1 1 0} 

.table2{border:#000000 solid;border-width:1 0 0 1;background:#ffffff} 

.td2{border:#000000 solid;border-width:0 1 1 0} 

.table3{border:green dotted;border-width:2 0 0 2} 

.td3{border:green dotted;border-width:0 2 2 0} 

.table4{border:blue solid;border-width:2 1 1 2} 

.td4{border:blue solid;border-width:0 1 1 0} 

.table5{border:teal 4 double} 

.td5{border:teal 1 solid } 

.table6{border:3 outset} 

.td6{border: 1 solid} 

.table7{border:3 inset} 

.td7{border:1 solid} 

.table8{border:#ee0000 3 ridge} 

.td8{border:1 solid} 

.table9{border: 4 skyblue ridge} 

.td9{border:1 navy groove ;background:#ffffff} 

.td10{border:maroon 3 double} 

.table11{border:purple 4 ;border-style:dashed double} 

.td11{border:1 solid} 

.out{border-width:1;border-style:solid;border-color:#cccccc #333333 #333333 #cccccc} 

.in{border-width:1;border-style:solid;border-color:#333333 #cccccc #cccccc #333333;background:#ffcccc} 

</style> 

</head> 

<body bgcolor="#FFFFFF" text="#000000"> 



<div align="center"> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table1"> 

<tr > 

<td class=td1>  </td> 

<td class="td1">  </td> 

<td class="td1">  </td> 

</tr> 

<tr> 

<td class="td1">  </td> 

<td class="td1">  </td> 

<td class="td1">  </td> 

</tr> 

<tr> 

<td class="td1">  </td> 

<td class="td1">  </td> 

<td class="td1">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table2"> 

<tr > 

<td class="td2"s>  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table3"> 

<tr > 

<td class="td3"s>  </td> 

<td class="td3">  </td> 

<td class="td3">  </td> 

</tr> 

<tr> 

<td class="td3">  </td> 

<td class="td3">  </td> 

<td class="td3">  </td> 

</tr> 

<tr> 

<td class="td3">  </td> 

<td class="td3">  </td> 

<td class="td3">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table4"> 

<tr > 

<td class="td4">  </td> 

<td class="td4">  </td> 

<td class="td4">  </td> 

</tr> 

<tr> 

<td class="td4">  </td> 

<td class="td4">  </td> 

<td class="td4">  </td> 

</tr> 

<tr> 

<td class="td4">  </td> 

<td class="td4">  </td> 

<td class="td4">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table5"> 

<tr > 

<td class="td5">  </td> 

<td class="td5">  </td> 

<td class="td5">  </td> 

</tr> 

<tr> 

<td class="td5">  </td> 

<td class="td5">  </td> 

<td class="td5">  </td> 

</tr> 

<tr> 

<td class="td5">  </td> 

<td class="td5">  </td> 

<td class="td5">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table6"> 

<tr > 

<td class="td6">  </td> 

<td class="td6">  </td> 

<td class="td6">  </td> 

</tr> 

<tr> 

<td class="td6">  </td> 

<td class="td6">  </td> 

<td class="td6">  </td> 

</tr> 

<tr> 

<td class="td6">  </td> 

<td class="td6">  </td> 

<td class="td6">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table7"> 

<tr > 

<td class="td7">  </td> 

<td class="td7">  </td> 

<td class="td7">  </td> 

</tr> 

<tr> 

<td class="td7">  </td> 

<td class="td7">  </td> 

<td class="td7">  </td> 

</tr> 

<tr> 

<td class="td7">  </td> 

<td class="td7">  </td> 

<td class="td7">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table8"> 

<tr > 

<td class="td8">  </td> 

<td class="td8">  </td> 

<td class="td8">  </td> 

</tr> 

<tr> 

<td class="td8">  </td> 

<td class="td8">  </td> 

<td class="td8">  </td> 

</tr> 

<tr> 

<td class="td8">  </td> 

<td class="td8">  </td> 

<td class="td8">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="1" cellpadding="0" border="0" class="table9"> 

<tr > 

<td class="td9">  </td> 

<td class="td9">  </td> 

<td class="td9">  </td> 

</tr> 

<tr> 

<td class="td9">  </td> 

<td class="td9">  </td> 

<td class="td9">  </td> 

</tr> 

<tr> 

<td class="td9">  </td> 

<td class="td9">  </td> 

<td class="td9">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="2" cellpadding="0" border="0"> 

<tr > 

<td class="td10">  </td> 

<td class="td10">  </td> 

<td class="td10">  </td> 

</tr> 

<tr> 

<td class="td10">  </td> 

<td class="td10">  </td> 

<td class="td10">  </td> 

</tr> 

<tr> 

<td class="td10">  </td> 

<td class="td10">  </td> 

<td class="td10">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table11"> 

<tr > 

<td class="td11">  </td> 

<td class="td11">  </td> 

<td class="td11">  </td> 

</tr> 

<tr> 

<td class="td11">  </td> 

<td class="td11">  </td> 

<td class="td11">  </td> 

</tr> 

<tr> 

<td class="td11">  </td> 

<td class="td11">  </td> 

<td class="td11">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" border="0" cellspacing="1" cellpadding="0" style="border:#cc0000 1 solid" > 

<tr> 

<td> 

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2"> 

<tr > 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" border="0" cellspacing="3" cellpadding="0" style="border:#cc0000 1 solid" background="back.jpg"> 

<tr> 

<td> 

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2" > 

<tr > 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" cellspacing="2" cellpadding="0" border="0" style="border:1 navy solid" background="back.jpg"> 

<tr > 

<td class="td9">  </td> 

<td class="td9">  </td> 

<td class="td9">  </td> 

</tr> 

<tr> 

<td class="td9">  </td> 

<td class="td9">  </td> 

<td class="td9">  </td> 

</tr> 

<tr> 

<td class="td9">  </td> 

<td class="td9">  </td> 

<td class="td9">  </td> 

</tr> 

</table> 

<p>  </p> 

<table width="500" border="0" cellspacing="3" cellpadding="0"> 

<tr> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

</tr> 

<tr> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

</tr> 

<tr> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

<td> 

<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out"> 

<tr> 

<td class="in">  </td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

</div> 

</body> 

</html>


...全文
94 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
shenzhenNBA 2009-07-26
  • 打赏
  • 举报
 回复
CSS中padding,margin,border等,当值为 0 时可以不用单位,非零时要加单位,
大猫钓鱼 2009-07-26
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 noaighost 的回复:]
文件二
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style>
.table2{border:#000000 solid;border-width:1 0 0 1;background:#ffffff}
.td2{border:#000000 solid;border-width:0 1 1 0}</style></head><body><divalign="center"><tablewidth="500" cellspacing="0" cellpadding="0" border="0" class="table2"><tr><tdclass="td2"s> </td><tdclass="td2"> </td><tdclass="td2"> </td></tr><tr><tdclass="td2"> </td><tdclass="td2"> </td><tdclass="td2"> </td></tr><tr><tdclass="td2"> </td><tdclass="td2"> </td><tdclass="td2"> </td></tr></table></div></body></html>
[/Quote]

border-width:1 0 0 1
这个起作用了没？
浴火_凤凰 2009-07-26
  • 打赏
  • 举报
 回复
非零时要加单位
noaighost 2009-07-25
  • 打赏
  • 举报
 回复
文件二


<!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=utf-8" />

<title>无标题文档</title>

<style> 

.table2{border:#000000 solid;border-width:1 0 0 1;background:#ffffff} 

.td2{border:#000000 solid;border-width:0 1 1 0} 

</style> 

</head>



<body>

<div align="center">

<table width="500" cellspacing="0" cellpadding="0" border="0" class="table2"> 

<tr > 

<td class="td2"s>  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

<tr> 

<td class="td2">  </td> 

<td class="td2">  </td> 

<td class="td2">  </td> 

</tr> 

</table>

</div>

</body>

</html>
CSS-table表格
一、表格的创建 表格由<table>开始,</table>结束。除此之外还需要行元素<tr>和单元格元素<td> 语法格式： <table> <tr> <td>单元格内的文字</td> …… </tr> …… </table> 解释： <table></table>：用于定义一个表格 <tr></tr>：用于定义
好看的table css样式
漂亮的table表格样式css源码漂亮的table表格样式css源码&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; table { border-collapse: collapse; margin: 0 ...
CSS控制Table内外边框、颜色、大小示例
在默认的情况下，我们的CSS将Table的边框清除掉了，下面与大家分享下CSS控制Table内外边框、颜色、大小的样式，想学习的朋友可以参考下   其实按照常理来说，现在的网站应该早已经抛弃什么表格了，现在肯定是DIV+CSS当道嘛！不过客户的网站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。 在默认的情况下，我们的CSS将Tabl
css 列宽控制,CSS 控制table 滑动及调整列宽等问题总结
本文介绍了通过css+js来控制table的x,y方向上的滚动。然后详细分析了使用table时，可能出现的width宽度与预期设定不一致的情况，最后给出了解决方案效果图三. 表格宽度上面两段代码是在table的设置上是有差异的：第二个例子的css 样式table.item将table-layout:fixed去除掉了。因为如果不去除掉。显示效果是下面这样的上面表头的table宽度设置无效了。可以看...
css两个table对齐
1、两个<table>表格宽度不对齐，只要数据有变化就会出现各种不对其的现象。 解决方法是将<table>的table-layout样式设置成fixed;，进行固定表格布局，它仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。 table-layout样式默认的样式是auto;，列的宽度是由列单元格中没有折行的最宽的内容设定的。 <table>标签的css样式： table { table-layout:fixed; } ...
CSS

61,124

社区成员

60,705

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章