表列标题中的迷路边框

Question

我的标题中有以下CSS：

    <style type="text/css">
    table, td
    {
        border-color: #600;
        border-style: solid;
    }

    table
    {
        border-width: 0 0 1px 1px;
        border-spacing: 0;
        border-collapse: collapse;
    }

    td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 0;
        background-color: #FFC;
    }
</style>

我页面正文中的下表：

<table>
    <tr>
        <th style="width: 100px;">column</th><th style="width: 180px;">column</th><th style="width: 100px;">column</th><th style="width: 100px;">column</th>
        <th style="width: 180px;">column</th><th style="width: 180px;">column</th> <th>column</th>
    </tr>
    <tr>
        <td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td><a href="">text</a></td>
    </tr>
</table>

结果如下：

查看第一列标题上是否有左边框？造成这种情况的原因是什么？我怎样才能让它消失？

谢谢！

Answer 1

将此添加到您的css：

tr{border-left:1px solid #000;}
tr:first-child{border-left:none;}

否则你将不会在左边获得边框

检查这个小提琴：http://jsfiddle.net/surendraVsingh/KNNeZ/

Answer 2

请更新您的table风格

 table
    {
        border-width: 0 0 1px 0px;
        border-spacing: 0;
        border-collapse: collapse;
    }

同时为TD标签添加左边框，以便在td上保留左边的顺序，而不是在左边。

td
    {
        margin: 0;
        padding: 4px;
        border-width: 1px 1px 0 1px;
        background-color: #FFC;
    }​

试试这个fiddle

Answer 3

DEMO ：Border Corrected  我已在margin:20px;添加了table，以便您以后可以将其删除