流浪邊境

我已經在我的頭下面的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

回答

相關問題