在不使用 <col> 或更改 HTML 的情况下使用 CSS 设置表格中的列宽答案

【问题标题】：Set column width in table with CSS without using <col> or changing the HTML在不使用 <col> 或更改 HTML 的情况下使用 CSS 设置表格中的列宽
【发布时间】：2015-03-03 11:54:37
【问题描述】：

我正在尝试为不包含<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>

【问题讨论】：

（对于 60% 的宽度）？你可以通过 td { width: 60%; 在纯 CSS 中做到这一点。 }
@MrBr1ghtSide：我无法更改 HTML。
然后在你的 CSS 中尝试 td{width:60%}

【解决方案1】：

假设您想将两列定义为具有不同的宽度，您可以使用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/

【讨论】：

@dmr 它在我的 IE8 中运行良好。另一方面，IE7 并没有那么多，但如果你想回到那么远，你将不得不依赖 JavaScript。如果您无法编辑实际的 HTML，则无法避免。
IE8 不支持nth-child 选择器：developer.mozilla.org/en-US/docs/Web/CSS/:nth-child。话虽如此，我认为您唯一的解决方案是使用 JavaScript 来获得 IE8 支持。
@hungerstar 现在我很好奇为什么它会适用于我和几个浏览器拍摄系统（即browserstack.com/screenshots/…）。
不确定，有兴趣了解一下。
@hungerstar 我认为这可能是一些晦涩难懂的设置。请记住，我禁用了应用于表格的width: 100%; 以演示那些较小的尺寸。也可能只是他们将单元格渲染得那么小，但我对此表示怀疑，因为如果可能的话，默认情况下会同时扩展这两个单元格，直到所有单元格都在一条线上。不过，不知道真正的原因。我已经回去并将 CSS 改写为first-child + td。它更草率，但它有效。

【解决方案2】：

一般来说，:nth-child 适合设置列的样式（通过设置其中的单元格样式），正如@AoN 所建议的那样。但是在像这样的简单案例中，只有两列，您可以使用其他技术，即使在 IE 7 上也可以使用。（如果您需要支持更旧版本的 IE，请考虑使用 polyfill。）

这是一种可能的方法。首先删除表格的宽度设置。然后将th 和td 元素的宽度设置为您希望第二列占据的宽度，比如说250px。要设置第一列的宽度，请使用:first-child 伪类设置作为其父级的第一个子级的任何td 或th 单元格的宽度。关键是第二个规则将覆盖第一列的第一个规则，因为选择器更具体，第一个规则只应用于第一列。

.articleTable th, .articleTable td {
  width: 250px;
}     
.articleTable th:first-child,  .articleTable td:first-child {
  width: 100px;
} 

.articleTable table{
  font-size: 14px;
  border-collapse: collapse;
  border: 2px solid #d6e0e9;  
  color: #363636;
  font-family: "Georgia", serif;
  line-height: 24px;
}

.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>

【讨论】：

【解决方案3】：

因为您需要 IE8 支持并且无法手动更改标记，所以我认为您已降级为 JavaScript 解决方案。下面是您的表格的简化版本以及您可以做什么。

HTML

<div class="target-table">
    <table>
        <tr>
            <td colspan="2">Title</td>
        </tr>
        <tr>
            <td>Header</td>
            <td>Header 2</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </table>
</div>

CSS

.target-table .col-0 {
    width: 300px;
}
.target-table .col-1 {
    width: 500px;
}

jQuery

$('tr:eq(1) td').each( function( index ) {
    $(this).addClass('col-'+index);    
});

在您的代码中，您有一些 colspan 属性。要设置每列的宽度，您必须找到具有该表最大列数的表行。在我的示例中，第二个表格行是具有最大列数的第一行。我们使用 jQuery 的 eq() 选择器选择它并传递 1 和 not 2，因为我们正在使用从零开始的索引。之后，我们只需循环遍历我们的 jQuery 选择器的结果，tr:eq(1) td'，务实地为每个表格单元格添加一个 col-? 类。表格将根据列中最宽的单元格扩展列的宽度。

CSS 应该非常简单。如果您有几个不同大小的表（多于两列），那么您可能必须根据具有最大列数的行来不同地定位每个表。 .veggie-target-table tr:eq(2) td 与 .fruit-target-table tr:eq(1) td 之类的东西。

jsFiddle：http://jsfiddle.net/trdajp1f/

【讨论】：