css怎么解决表格边框线重复问题. 20
我用CSS样式做个一个表格的边框,可我在表格内嵌套了一个表格后,边框线出现了重复.请文用CSS怎么取消重复的边框线.我的边框CSS样式.bord{border-colla...
我用CSS样式做个一个表格的边框,可我在表格内嵌套了一个表格后,边框线出现了重复.请文用CSS怎么取消重复的边框线.
我的边框CSS样式
.bord{
border-collapse:collapse;
border:1px solid #ddd;}
.bord{border:1px solid #ddd;}
bord{
border-collapse:collapse;
border:1px solid #ddd;}
.bord td{border:1px solid #ddd;} 展开
我的边框CSS样式
.bord{
border-collapse:collapse;
border:1px solid #ddd;}
.bord{border:1px solid #ddd;}
bord{
border-collapse:collapse;
border:1px solid #ddd;}
.bord td{border:1px solid #ddd;} 展开
6个回答
展开全部
1、td 的边框和table 的边框重叠
.table { border-left:1px solid #dedede; border-top:1px solid #dedede;}
.td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
table 只用左边框和上边框，每个td只有右边框和下边框，效果就是整个表格左、上边框是连续实线，右、下边框是延续td的边框所以是断断续续的
解决方法：
.table {border:1px solid #dedede; border-collapse:collapse;}
.td {border:1px solid #dedede; } 橘色字体是关键，边框设置也不用分上下左右了，重叠的话会一个覆盖另一个
firefox中：td的border覆盖table 的，IE中table 的border覆盖td的，我这里border颜色一样，无所谓了
表格线常见问题：
1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]
2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]
3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]
4.border-collapse有两个属性，separate 和 collapse 。
separate是默认属性，表格边框默认有1px 的间隙，在表格排版时代，设置好表格背景色，我们曾用它来挤出版块的外边框；
collapse，是将表格边框的间隙去掉，这样给表格的td边框赋值时就不会产生双线框了。
Demo：没有设置collapse属性的双线表格
.table { border-left:1px solid #dedede; border-top:1px solid #dedede;}
.td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
table 只用左边框和上边框，每个td只有右边框和下边框，效果就是整个表格左、上边框是连续实线，右、下边框是延续td的边框所以是断断续续的
解决方法：
.table {border:1px solid #dedede; border-collapse:collapse;}
.td {border:1px solid #dedede; } 橘色字体是关键，边框设置也不用分上下左右了，重叠的话会一个覆盖另一个
firefox中：td的border覆盖table 的，IE中table 的border覆盖td的，我这里border颜色一样，无所谓了
表格线常见问题：
1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]
2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]
3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]
4.border-collapse有两个属性，separate 和 collapse 。
separate是默认属性，表格边框默认有1px 的间隙，在表格排版时代，设置好表格背景色，我们曾用它来挤出版块的外边框；
collapse，是将表格边框的间隙去掉，这样给表格的td边框赋值时就不会产生双线框了。
Demo：没有设置collapse属性的双线表格
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
border-top:none; 上边
border-bottom:none; 下
border-right:none; 右
border-left:none; 左
哪重复了,把哪个边框去了.
border-bottom:none; 下
border-right:none; 右
border-left:none; 左
哪重复了,把哪个边框去了.
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你定义的类，class名字是一样的哦。
重新定义一个no-border{border:none;}这样一个class类...需要时可以应用抵消掉bord的作用...
重新定义一个no-border{border:none;}这样一个class类...需要时可以应用抵消掉bord的作用...
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你写了一小段代码，看下对你有没有帮助？？
<!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
type="text/css">
table{border-collapse:collapse;}
td{height:22px;width:80px;border:1px
solid
#CCC;}
</style>
</head>
<body>
<table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>
</body>
</html>
<!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
type="text/css">
table{border-collapse:collapse;}
td{height:22px;width:80px;border:1px
solid
#CCC;}
</style>
</head>
<body>
<table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把最里面的那个表格的宽度设为 0 px。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
