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

还注意到，如果我在小提琴中关闭标准化，那么边框会出现在桌面上。

一切都在Ubuntu服务器上运行，我在winXP中构建它然后ftp到Apache，所以可能存在一些干扰CSS的权限问题？

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

直播example

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

Answer 3

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

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

Answer 4

我认为这已经足够了

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

CSS html表左右边框

4 个答案:

Demo