<td style= "width" >属性在内联中工作，但在外部样式表中不起作用

Question

我正在尝试使用外部 css 来格式化一个 3 列表，宽度分别为 100%，列宽分别为 10%、80% 和 10%。我所有的 td 属性都从外部样式表中工作，宽度除外。

<td style="width:10%">

在内联 CSS 中工作，但不能作为内部样式或外部样式表工作。如果我从表格中删除 100% width 属性，它将从外部 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/

希望这可能会有所帮助。