流浪边境

我已经在我的头下面的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>

下面是结果：

enter image description here

看看第一列标题上有一个左边框吗？什么会造成这种情况，我该如何让它消失？

谢谢！

来源

2012-06-23 Nate

请更新您的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

来源

2012-06-23 18:58:02

为了澄清，语法[顶] [右] [底部] [左]。你在[left]上设置1px，因此左边有一个边框。 – Zhihao

看到这个http://jsfiddle.net/tFQJe/4/ – Rab

是的，谢谢@Zhaohao详细说明 –

DEMO：Border Corrected 我已经table添加margin:20px;为清楚起见，你可以将其删除后

来源

2012-06-23 19:04:50 Rab

添加到您的CSS：

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

否则你会得到左

检查未濒临此琴：http://jsfiddle.net/surendraVsingh/KNNeZ/

来源

2012-06-23 19:06:07 SVS

回答

相关问题