Html CSS html表格左右边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9711218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS html tables left and right border
提问by user1245706
I'm trying to write some CSS that will make it so my html table only has borders horizontally, and no borders vertically in between columns.
我正在尝试编写一些 CSS 来实现它，因此我的 html 表格只有水平边框，列之间没有垂直边框。
Here is what I have so far:
这是我到目前为止所拥有的：
@charset "utf-8";
/* CSS Document */
<style type="text/css">
box-table-a{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
/*border-width: 0px;
border-left: 0px;
border-right: 0px;*/
border-collapse: collapse;
}
#box-table-a th{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-right:1px solid #b9c9fe;
border-left:1px solid #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
}
#box-table-a td{
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
}
#box-table-a tr:hover td{
background: #d0dafd;
color: #339;
}
</style>
This results in a table with white borders on all sides. Any ideas what I'm doing wrong?
这会生成一张四面都有白色边框的表格。任何想法我做错了什么？
EDITI can get it to do what I want here: http://jsfiddle.net/QZwt5/26/but when I take this exact table, and exact css into dreamweaver and then ftp to my server I am still getting thin white lines in-between each cell. image http://img267.imageshack.us/img267/9135/temppb.jpg
编辑我可以让它在这里做我想做的事：http: //jsfiddle.net/QZwt5/26/但是当我把这个精确的表格和精确的css放入dreamweaver然后ftp到我的服务器时，我仍然得到细白线在每个单元格之间。 图片 http://img267.imageshack.us/img267/9135/temppb.jpg
Also just noticed that if I turn off normalized in fiddle that the borders appear on the table there.
还只是注意到，如果我在小提琴中关闭规范化，则边框会出现在那里的桌子上。
Everything is running on an Ubuntu server, I'm building it in winXP and then ftp to Apache, so there might be some permission problems interfering with the CSS?
一切都在 Ubuntu 服务器上运行，我在 winXP 中构建它，然后 ftp 到 Apache，所以可能存在一些干扰 CSS 的权限问题？
回答by Hymantheripper
This can be achieved simply using CSS
这可以简单地使用 CSS 来实现
HTML
HTML
<table border="1" id="table">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
</tr>
</table>?
CSS
CSS
tr {
border: 1px solid black;
}
td {
border: 0;
width: 100px;
}?
Live example
活生生的例子
回答by Steve
I might be wrong, but from just looking at your code, you never "remove" the borders on the left and right. Try adding
我可能是错的，但仅从您的代码来看，您永远不会“删除”左右边界。尝试添加
#box-table-a td{
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
border-left: none;
border-right: none;
color: #669;
border-top: 1px solid transparent;
}
回答by Niet the Dark Absol
Try removing the left and right borders from the thcells, and see if that fixes the problem.
尝试从th单元格中删除左右边框，看看是否能解决问题。
If it does, set the border-leftand border-righton the tdcells to be the same colour as the background, to "hide" them.
如果是，请将单元格上的border-left和设置为与背景颜色相同，以“隐藏”它们。border-righttd
