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

Question

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

<td style="width:10%">

在内联 css 中工作，但不能作为内部样式或来自外部样式表。如果我从 table 中删除 100% 宽度属性，它将从外部 css 读取 td 宽度，但是 table 的宽度会根据其中的文本量而变化。我试过使用

table-layout: fixed;

没有成功。我也试过一次从一列中删除宽度但没有效果。我能找到的所有示例都使用像素而不是 % 宽度。

我是不是漏掉了一些关于 table 设计的简单内容？

这是我的外部 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;
}

这里是 table 的 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>

它给我的 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/

希望这可能有所帮助。

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

<td style="width"> attribute works inline but not in external stylesheet

css

html

html-table

css-tables

column-width