使用 CSS 在 table 中设置列宽，而不使用 <col> 或更改 HTML

Question

我正在尝试为不包含 <col> 的 table 设置列宽（每列不同）。 HTML 来自数据库，我无法更改它（我试图避免使用 javascript 除外）。我将 table 和 class articleTable 放在 <div> 中，这样我就可以使用它来设置样式。如何仅使用 CSS 设置列的宽度？（我更喜欢适用于 IE8 的解决方案。）

这是一个例子table:

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

Answer 1

假设您想要将两列定义为具有不同的宽度，您可以使用 nth-child.

设置样式

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

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

希望对您有所帮助。

这是一个 JSFiddle，您可以看到：http://jsfiddle.net/54z0ssgt/

注意：我已经注释掉应用于 table 的 width: 100%，因此您可以看到按定义的像素调整大小的列。

编辑：

为了适应 IE8，我修改了 CSS。

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

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

工作 JSFiddle：http://jsfiddle.net/zmoLuh6v/

Answer 2

一般来说，:nth-child 是 suitable 用于样式化列（通过样式化其中的单元格），正如@AoN 所建议的。但在像这样的简单情况下，只有两列，您可以使用其他技术，这些技术甚至可以在 IE 7 上运行。（如果您需要支持甚至更旧版本的 IE，请考虑使用 polyfill。）

这是一种可能的方法。首先删除 table 的宽度设置。然后将 th 和 td 元素的宽度设置为您希望第二列占据的宽度，假设为 250px。要设置第一列的宽度，请使用 :first-child 伪 class 设置作为其父项的第一个子项的任何 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>

Answer 3

因为您需要 IE8 支持并且不能手动更改标记，所以我认为您只能使用 JavaScript 解决方案。下面是您的 table 和您可以做什么的简化版本。

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 属性。要设置每列的宽度，您必须找到一个 table 行，该行具有该 table 的最大列数。在我的示例中，第二行 table 是具有最大列数的第一行。我们 select 使用 jQuery 的 eq() selector 并传递它 1 而 not 2 因为我们正在处理零基于索引。之后，我们只是循环遍历 jQuery select 或 tr:eq(1) td' 的结果，务实地向每个 table 单元格添加 class of col-? .表格将根据列中最宽的单元格扩展列的宽度。

CSS 应该非常简单明了。如果您有几个不同大小的 table（超过两列），那么您可能必须根据列数最大的行以不同方式定位每个 table。像 .veggie-target-table tr:eq(2) td vs .fruit-target-table tr:eq(1) td.

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

使用 CSS 在 table 中设置列宽，而不使用 <col> 或更改 HTML

Set column width in table with CSS without using <col> or changing the HTML

css

html-table

width

使用 CSS 在 table 中设置列​​宽，而不使用 <col> 或更改 HTML

Set column width in table with CSS without using <col> or changing the HTML

css

html-table

width

使用 CSS 在 table 中设置列宽，而不使用 <col> 或更改 HTML