CSS HTML表格左右边框

Question

我正在尝试编写一些CSS，使我的HTML表格只有水平边框，而没有列之间的垂直边框。

这是我目前的代码：

@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>

这将导致一个四面都有白色边框的表格。您有什么想法我做错了什么吗？

编辑： 我可以在这里得到我想要的效果：http://jsfiddle.net/QZwt5/26/，但是当我将这个确切的表格和确切的CSS带入Dreamweaver，然后通过FTP上传到我的服务器时，仍然在每个单元格之间得到细白线。 image http://img267.imageshack.us/img267/9135/temppb.jpg 我还注意到，如果在fiddle中关闭标准化，则表格上会出现边框。

一切都在Ubuntu服务器上运行，我正在winXP中构建它，然后通过FTP上传到Apache，因此可能会有一些权限问题干扰CSS？

- user1245706

---

也许这也导致了顶部和底部的边框。border-right:1px solid #b9c9fe; border-left:1px solid #b9c9fe; - Dips

Answer 1

仅使用CSS即可轻松实现此功能。

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

tr {
    border: 1px solid black;
}
td {
    border: 0;
    width: 100px;
}​

现场示例

。

- jacktheripper

---

我可以在jsFiddle上让它按照我的意愿运行，但是当我将工作的CSS从那里复制粘贴到我的服务器时，每个单元格周围仍然有白色边框。我还删除了我的样式表的其余部分，以查看是否只能使这些样式工作，并确保没有干扰。但是仍然没有变化。 - user1245706

Answer 2

我可能错了，但仅从您的代码来看，您从未“删除”左右边框。尝试添加

#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;
}

- Steve

---

谢谢您的回答，我尝试添加了这些内容，但没有任何效果 :( - user1245706

Answer 3

我认为这已经足够了

table tr { border: 1px #000 solid; }

演示

- Starx

Answer 4

尝试从 th 单元格中移除左右边框，看看是否可以解决问题。

如果可以，将 td 单元格的 border-left 和 border-right 设置为与背景颜色相同，以“隐藏”它们。

- Niet the Dark Absol