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

Question

I am trying to set the column widths (different for each column) for a table that does not contain <col>. The HTML is coming from a database and I cannot change it (except with javascript, which I'm trying to avoid). I put the table in a <div> with the class articleTable, so I can use that to style it. How can I set the widths for the columns using only CSS? (I'd prefer a solution that works with IE8.)

Here is an example 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

Because you need IE8 support and cannot change the markup manually then I think you're relegated to a JavaScript solution. Below have a simplified version of your table and what you could do.

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);    
});

In your code you have a few colspan attributes. To set the width of each column you would have to find a table row that has the maximum number of columns for that table. In my example the second table row is the first row with the maximum number of columns. We select that with jQuery's eq() selector and pass it 1 and not 2 because we are working with a zero based index. After that we just loop through the result of our jQuery selector, tr:eq(1) td', pragmatically adding a class of col-? to each table cell. Tables will expand a column's width based on the widest cell in the column.

The CSS should be pretty straight forward. If you have a few different sized tables (more than two columns) then you might have to target each table differently depending on the row with the maximum number of columns. Something like .veggie-target-table tr:eq(2) td vs .fruit-target-table tr:eq(1) td.

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

Answer 2

Assuming that you want to define both columns as having a different width, you can style it using nth-child.

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

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

I hope this helps.

Here's a JSFiddle so you can see: http://jsfiddle.net/54z0ssgt/

Note: I've commented out the width: 100% applied to the table so you can see the columns sized by the defined pixels.

Edit:

To accommodate IE8, I've modified the CSS.

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

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

Working JSFiddle: http://jsfiddle.net/zmoLuh6v/

Answer 3

In general, :nth-child is suitable for styling columns (by styling cells in them), as suggested by @AoN. But in a simple case like this, with just two columns, you can use other techniques, which work even on IE 7. (If you need to support even older versions of IE, consider using a polyfill.)

Here’s a possible approach. First remove the width setting for the table. Then set the width of th and td elements to what you want the second column to occupy, let’s say 250px. To set the width of the first column, set the width of any td or th cell that is the first child of its parent, using the :first-child pseudo-class. The point is that the second rule will override the first one for the first column, due to more specific selectors, leaving the first one to be applied to the first column only.

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