Question

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

<td style="width:10%">

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

table-layout: fixed;

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

我是否错过了关于桌面设计的简单方法？

这是我的外部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 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（只需从这一行中删除＆＃34; td＆＃34;＆＃34; table.border td＆＃34;）它将按预期工作：

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/

希望这可能会有所帮助。

属性工作在内联但不在外部样式表中

1 个答案: