什么?很容易?就让dreamweaver自动生成,设置宽高,然后给一个像素的border给td就能实现,真的很容易吗?但是我们按一般的设置会发现会出现下面这个问题:
出现的问题:
在
firefox
和
ie6,ie7
中存在表格宽高度不一致的显示(
firefox
和
ie5.5
的显示一样,
ie6
和
ie7
中显示一样)
一种设置方法(提案):
代码中的设置:
table
标签中:
cellspacing="0" cellpadding="0"
这句要加上,否则单元格高度比设置的要高
2px
,即设置的高度和行高为
20px,
实际显示为
22px
。
css
中设置:定义表格中的样式:加上
border-collapse:collapse;
单元格
td,th
中:
line-height:20px;
即用行高的设置代替高度设置。
计算设置好的表格宽度和高度:
单元格的高度:
=
行高(不包括边框在内);
单元格的宽度:
ie
中
=
设置的宽度(不包括边框在内),
firefox=
设置的宽度(不包括边框在内)
+
左
border
宽度,(即多算了一个左
border
宽度)
宽度:
ie
表格宽度
=
实际设置的表格宽度,
firefox
中显示的表格宽度
=
设置的表格宽度
+1*
右(或外)边框宽度
px
;
高度:这个全部都相同,
=
单元格行高
*
行数
(
多行字,一行字算一行
)+
边框数
这样做的缺点:
firefox
中显示的表格宽度
=
设置的表格宽度
+1*
右(或外)边框宽度
px
;这是由
b
order-collapse:collapse这句引起的。
问题出现的原因:
Firefox
对表格的解析和
ie5.5
的模型是一致的
1,
不加
cellspacing="0" cellpadding="0"
这句会出现的问题:
firefox
中
td
的实际高度等于设置的行高
+2px
即默认时
firefox
中
cellspacing
和
cellpadding
是有数值的。
2,
以高度
height
来设置
td
高度
td{height:X px}
:
Ie6,ie7
以单元格高度(即不加上下边框)为
td
的设置高度,但
ie5.5
和
firefox
是将单元格和上下边框的高度加起来为
td
的设置高度(如果没有
border-collapse:collapse
,这个高度是算上边框和下边框的高度即:
,X=
单元格实际高
+
上边框
+
下边框,但设置
border-collapse:collapse
以后,
border
的高度压缩了,则
,X=
单元格实际高
+(
上边框
+
下边框
)/2
)。在宽度设置上也存在这个问题。
3,
给单元格设置了宽度后,加
padding
属性
td{width:X px; paading:Apx Bpx Cpx Dpx;}
:
Ie6,ie7,
的中对宽度的解释:
X=
文字宽度,而实际单元格的宽度就等于
X+B+Dpx
,但
firefox
和
ie5.5
是一样的:
X=
单元格宽度
4,
给
table
加
border-collapse:collapse
出现的问题
table{width:500px; border-collapse:collapse;}
:
Ie6,ie7
表格的宽度为设置的实际宽度,但
firefox
和
ie5.5
表格的实际宽度为设置宽度
+
右边框的宽度
/2
。但有时如果我们需要
1px
的边框高度,必须要用到
border-collapse:collapse
时,这个宽度问题是否就可以将就。
另外:如果我们给表格既加了外边框又给单元格加了边框,由于加了这句,显示效果是不同的,ie会显示表格边框的颜色和宽度,但firefox不会,它会用单元格的边框属性覆盖住表格外边框的属性。
有另一种做出单边框的效果:
表格中
table
标签:
cellspacing="1" cellpadding="0"
样式表中:
table:{
background:red;border:0;}
td{background:green;}
则结果显示的就是红色的边框绿色背景的表格。这是否能替代
border-collapse:collapse
,做单边框表格,而解决
firefox
中宽度超出设置宽度的问题。
试验证明:解决了!不过这样不能单独设置某个单元格的边框效果,不然会出现该单元格多边框的效果:
得出另一种设置表格的方法:
代码中的设置:
table
标签中:
cellspacing="1" cellpadding="0"
css
中设置
:
table:{width:500px;
background:red;border:0;}
td,th{background:#fff; line-height:20px;};
即用行高的设置代替高度设置。
具体表格算法就不再说了,
这种做法好处:
解决了第一个种做法中表格宽度的问题,表格的宽度就直接等于我们设置的宽度了,高度计算和上一种方法一致。
综上,重点:
1,用line-height的设置代替height的设置来设置单元格的高度。
2,
cellspacing,cellpadding这两个属性的重要性。
3,
border-collapse:collapse这句给表格设置带来的差别。
4,td的padding属性ie6,ie7和firefox对此解释的不同。
原文地址:http://hi.baidu.com/bujichong/blog/item/7a24ffde81020a5795ee3762.html
分享到:
相关推荐
运行本软件,按软件界面提示打开要排版的word文件,在界面中对表格进行统一格式设置,点击开始后可能自动对所打开的word文件中的所有表格进行自动快速的统一格式设置(包括表格的行高、列宽、表格内字体、边框、...
里面详细介绍了表格边框设置时常用到的问题和方法,如边框为1的表格。
解决移动端存在的一像素边框问题,可以完美的展示在web端上,通用的方式调用即可
Dreamweaver 制作细边框表格 1
个word文档的边框线不能保存,在网上查了一下都没有解决办法。我自己琢磨,现在问题已解决,把办法分享给大家。
vba 设置边框样式vba 设置边框样式vba 设置边框样式
表格边框样式大全
关于java EXCEL poi 合并后无法显示或无法设置边框问题 【本人亲测】 excel poi 新手! 坑了1.5天!
因为项目需要,发现直接从...这里从word,以及excel粘贴复制,都能直接有边框了,同时在编辑器里面新增表格,也能直接显示边框了,不需要右键-->设置显示边框了 我这里是使用在禅道上的,这里就直接给出已经修改的js
你可以指定行数和列数来动态添加表格并且每个表格都有边框
设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
cad A0 A1 A2 A3 边框表格图样
使用wps2019,如何将表格外部边框加粗内部边框不变化。
Excel表格边框设置参考.pdf
点击表格单行添加边框背景色,希望是你想要的
本文介绍了解决移动端1px边框问题的5种方法。当然了,在这之前先整理了与这些方法相关的知识:物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...