<td style =「width」>屬性在內嵌工作，但不在外部樣式表

Question

我試圖使用外部css來格式化100％寬度和列寬10％，80％和10的3列表％ 分別。我的所有td屬性都是從外部樣式表中除了寬度。

<td style="width:10%"> 

工作在內聯css，但不作爲內部樣式或外部樣式表。 如果我從表中刪除100％寬度屬性，它將從外部CSS讀取td寬度，但隨後表格的寬度根據文本的寬度而變化。 我試過使用

table-layout: fixed; 

沒有成功。我也曾嘗試一次刪除一列的寬度，但沒有任何效果。我可以找到的所有示例都使用像素代替％寬度。

我錯過了關於桌子設計的一些簡單的事情嗎？

這裏是我的外部CSS的相關部分：

table.border td { 
    border-width: 5px; 
    padding: 10px; 
    border-style: ridge; 
    border-color: white; 
    border-collapse: collapse; 
    -moz-border-radius: 0px 0px 0px 0px; 
    vertical-align: top; 
    width: 100%; 
} 

td.edge { 
    background-color: green; 
    width: 10%; 
} 
    td.center{ 
    width: 80%; 
    background-color: pink; 
} 

和這裏的表的HTML：

<table class="border" > 
<tr> 
<td class="edge"> hi there</td> 
<td class="center">it's me</td> 
<td class="edge"> bye there</td> 
</tr> 
</table> 

它給我的表中有廣泛的第一列和窄第二和第三列。

Answer 1

糾正CSS如下（剛剛從該行刪除 「TD」： 「table.border TD」），它會如預期：

table.border{ 
    border-width: 5px; 
    padding: 10px; 
    border-style: ridge; 
    border-color: white; 
    border-collapse: collapse; 
    -moz-border-radius: 0px 0px 0px 0px; 
    vertical-align: top; 
    width: 100%; 
} 

td.edge { 
    background-color: green; 
    width: 10%; 
} 
    td.center{ 
    width: 80%; 
    background-color: pink; 
} 

這是的jsfiddle例如：https://jsfiddle.net/r281bv1z/

希望這可能有所幫助。