我正在尝试为不包含的表格设置列宽（每列不同）<col>。HTML来自数据库，我无法对其进行更改（除了javascript，我试图避免这种情况）。我将表<div>与类放在一起articleTable，因此可以使用它来设置样式。如何仅使用CSS设置列的宽度？（我更喜欢与IE8兼容的解决方案。）
这是一个示例表：
.articleTable table{
font-size: 14px;
border-collapse: collapse;
border: 2px solid #d6e0e9;
color: #363636;
font-family: "Georgia", serif;
line-height: 24px;
width: 100%;
}
.articleTable tr{
border: 2px solid #d6e0e9;
}<div class="articleTable">
<!--Jimmy Carter's Cabinet-->
<table border="1" bordercolor="#D6E0E9" cellpadding="4" cellspacing="0">
<tbody>
<tr>
<td valign="center" colspan="2"><font class="subheadlarge"><b>Carter Administration</b></font><font class="regtext"> (1977–1981)</font></td>
</tr>
<tr>
<th valign="center" class="regbold">Position</th>
<th valign="center" class="regbold">Member</th>
</tr>
<tr>
<td valign="center" class="regtext">Vice President</td>
<td valign="center" class="regtext"><a href="vpr042">Walter F. Mondale</a></td>
</tr>
<tr>
<td valign="center" class="regtext" rowspan="2">Secretary of State</td>
<td valign="center" class="regtext"><a href="TJCY147">Cyrus R. Vance</a></td>
</tr>
<tr>
<td valign="center" class="regtext"><a href="TJCY107">Edmund S. Muskie</a> (from May 1980)</td>
</tr>
<tr>
<td valign="center" class="regtext" rowspan="2">Secretary of the Treasury</td>
<td valign="center" class="regtext"><a href="TJCY025">W. Michael Blumenthal</a></td>
</tr>
<tr>
<td valign="center" class="regtext"><a href="TJCY102">G. William Miller</a> (from August 1979)</td>
</tr>
<tr>
<td valign="center" class="regtext">Secretary of Defense</td>
<td valign="center" class="regtext"><a href="TJCY031">Harold Brown</a></td>
</tr>
<tr>
<td valign="center" class="regtext" rowspan="2">Attorney General</td>
<td valign="center" class="regtext"><a href="TJCY021">Griffin Bell</a></td>
</tr>
<tr>
<td valign="center" class="regtext">Benjamin R. Civiletti (from August 1979)</td>
</tr>
<tr>
<td valign="center" class="regtext">Secretary of the Interior</td>
<td valign="center" class="regtext"><a href="TJCY011">Cecil B. Andrus</a></td>
</tr>
<tr>
<td valign="center" class="regtext">Secretary of Agriculture</td>
<td valign="center" class="regtext"><a href="TJCY022">Robert Bergland</a></td>
</tr>
<tr>
<td valign="center" class="regtext" rowspan="2">Secretary of Commerce</td>
<td valign="center" class="regtext"><a href="TJCY088">Juanita M. Kreps</a></td>
</tr>
<tr>
<td valign="center" class="regtext"><a href="TJCY086">Philip M. Klutznick</a> (from January 1980)</td>
</tr>
<tr>
<td valign="center" class="regtext">Secretary of Labor</td>
<td valign="center" class="regtext">F. Ray Marshall</td>
</tr>
<tr>
<td valign="center" class="regtext" rowspan="2">Secretary of Health, Education, and Welfare</td>
<td valign="center" class="regtext">(The Department was dissolved when it was split into the Department of Health and Human Services and the Department of Education by Congress in 1979) Joseph A. Califano Jr.</td>
</tr>
</tbody>
</table>
</div>假设您想将两列定义为不同的宽度，则可以使用设置样式nth-child。
.articleTable tr td:first-child {
width: 50px;
}
.articleTable tr td:nth-child(2) {
width: 180px;
}
我希望这有帮助。
这是一个JSFiddle，因此您可以看到：http : //jsfiddle.net/54z0ssgt/
注意：我已经注释了width: 100%应用于表的内容，因此您可以看到按定义的像素大小的列。
编辑：
为了适应IE8，我修改了CSS。
.articleTable tr td:first-child {
width: 50px;
}
.articleTable tr td:first-child + td {
width: 180px;
}
工作的JSFiddle：http：//jsfiddle.net/zmoLuh6v/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句