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>

<td style="width:60%"> (for 60% width)? You can do it in pure css by doing td { width: 60%; } — Pieter De Clercq
– Pieter De Clercq, Commented Jan 5, 2015 at 21:21

Christopher Esbrandt · Accepted Answer · 2015-01-05 21:48:26Z

3

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/

edited Jan 5, 2015 at 21:48

answered Jan 5, 2015 at 21:23

Christopher Esbrandt

1,1989 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Christopher Esbrandt Over a year ago

@dmr It works fine in my IE8. IE7, on the other hand, not so much, but if you want to go back that far, you'll have to rely on JavaScript for this. There's no avoiding it if you can't edit the actual HTML.

hungerstar Over a year ago

IE8 does not support the nth-child selector: developer.mozilla.org/en-US/docs/Web/CSS/:nth-child. With that said I think your only solution is to use JavaScript to get IE8 support.

Christopher Esbrandt Over a year ago

@hungerstar Now I'm curios as to why it would work for me and several browser shot systems (ie. browserstack.com/screenshots/…).

hungerstar Over a year ago

Not sure, would be interested to find out.

Christopher Esbrandt Over a year ago

@hungerstar I think it may be some obscure setting. Remember, I disabled the width: 100%; applied to the table to demo those smaller sizes. It could also just be that they rendered the cells that small, but I doubt it since the default would be to expand both until all cells are on one line, if possible. No idea as to the actual cause, though. I've gone back and reworked the CSS to first-child + td. It's sloppier, but it works.

Jukka K. Korpela · Accepted Answer · 2015-01-05 21:44:31Z

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>

hungerstar · Accepted Answer · 2015-01-05 21:54:12Z

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/

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related