使用CSS设置表格中的列宽，而不使用<；col>；或者更改HTML

我正在尝试为不包含

的表设置列宽（每列不同）HTML来自数据库，我无法更改它（javascript除外，我正试图避免）。我用类

articleTable

将表放入一个

中，因此我可以使用它来设置样式。如何仅使用CSS设置列的宽度？（我更喜欢使用IE8的解决方案。）

下面是一个示例表：

.articleTable表{
字体大小：14px；
边界塌陷：塌陷；
边框：2px实心#d6e0e9；
颜色：#363636；
字体系列：“格鲁吉亚”，衬线；
线高：24px；
宽度：100%；
}
.articleTable tr{
边框：2px实心#d6e0e9；
}

卡特政府（1977-1981）
位置
成员
副总裁
国务卿
（1980年5月起）
财政部长
（1979年8月起）
国防部长
总检察长
Benjamin R.Civiletti（1979年8月起）
内政部长
农业部长
商务部长
（1980年1月起）
劳工部长
雷马歇尔
卫生、教育和福利部长
（该部门于1979年被国会分为卫生与公共服务部和教育部后解散）。

假设要将两列定义为具有不同的宽度，可以使用第n个子项设置样式

.articleTable tr td:first-child {
 width: 50px;
}

.articleTable tr td:nth-child(2) {
 width: 180px;
}

我希望这有帮助

下面是一个JSFIDLE，您可以看到：

注意：我已经注释掉了应用于表的

宽度：100%

，这样您就可以看到按定义像素大小排列的列

编辑：

为了适应IE8，我修改了CSS

.articleTable tr td:first-child {
 width: 50px;
}

.articleTable tr td:first-child + td {
 width: 180px;
}

---

工作JSFIDLE:

一般来说，

：n子项

适合设置列的样式（通过设置列中的单元格的样式），如@AoN所建议的。但在这样一个简单的例子中，只要有两列，就可以使用其他技术，甚至可以在IE7上使用。（如果您需要支持甚至更旧版本的IE，请考虑使用PultFube）

这里有一个可能的方法。首先删除表格的宽度设置。然后将

th

和

td

元素的宽度设置为您希望第二列占据的宽度，比如250px。要设置第一列的宽度，请使用

：first child

伪类设置作为其父级第一个子级的任何

td

或

th

单元格的宽度。关键是，由于更具体的选择器，第二条规则将覆盖第一列的第一条规则，而第一条规则只应用于第一列

.articleTable th、.articleTable td{
宽度：250px；
}     
.articleTable th:第一个孩子，.articleTable td:第一个孩子{
宽度：100px；
} 
.articleTable{
字体大小：14px；
边界塌陷：塌陷；
边框：2px实心#d6e0e9；
颜色：#363636；
字体系列：“格鲁吉亚”，衬线；
线高：24px；
}
.articleTable tr{
边框：2px实心#d6e0e9；
}

卡特政府（1977-1981）
位置
成员
副总裁
国务卿
（1980年5月起）
财政部长
（1979年8月起）
国防部长
总检察长
Benjamin R.Civiletti（1979年8月起）
内政部长
农业部长
商务部长
（1980年1月起）
劳工部长
雷马歇尔
卫生、教育和福利部长
（该部门于1979年被国会分为卫生与公共服务部和教育部后解散）。

因为您需要IE8支持，并且无法手动更改标记，所以我认为您只能使用JavaScript解决方案。下面是您表格的简化版本以及您可以做的事情

HTML

标题
标题
标题2
内容
内容

CSS

.target table.col-0{
宽度：300px；
}
.目标表。col-1{
宽度：500px；
}

jQuery

$（'tr:eq（1）td'）。每个（函数（索引）{
$（this.addClass（'col-'+索引）；
});

在代码中有几个

colspan

属性。要设置每一列的宽度，您必须找到一个表行，该行具有该表的最大列数。在我的示例中，第二个表行是具有最大列数的第一行