CSS table column autowidth

Question

Given the following how do i make my last column auto size to its content? (The last column should autosize-width to the content. Suppose i have only 1 li element it should shrink vs. having 3 li elements etc):

table {
  table-layout: fixed;
  width: 100%;
}

table tr {
  border-bottom: 1px solid #e9e9e9;
}

table thead td,
th {
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #d5d5d5;
  background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100%;
  font-weight: bold;
  text-align: left;
}

table tr td,
th {
  border: 1px solid #D5D5D5;
  padding: 15px;
}

table tr:hover {
  background: #fcfcfc;
}

table tr ul.actions {
  margin: 0;
}

table tr ul.actions li {
  display: inline;
  margin-right: 5px;
}

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <!-- universal table heading -->
    <tr>
      <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
      <td class="tc">Type</td>
      <th>File</th>
      <th>Sample</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
      <td>Division 4</td>
      <td>Division 5</td>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
      <td>Division 4</td>
      <td class="last">
        <ul class="actions">
          <li><a class="iconStats" href="#">Statystyki</a></li>
          <li><a class="iconEdit" href="#">Edytuj</a></li>
          <li><a class="iconDelete" href="#">Usuń</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

score 273 · Accepted Answer · edited Apr 03 '19 at 23:41

273

The following will solve your problem:

td.last {
    width: 1px;
    white-space: nowrap;
}

Flexible, Class-Based Solution

And a more flexible solution is creating a .fitwidth class and applying that to any columns you want to ensure their contents are fit on one line:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

And then in your HTML:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

edited Apr 03 '19 at 23:41

Joshua Pinter

45,245
23
243
245

answered Jun 01 '12 at 15:36

Doug Amos

4,243
1
22
23

3

Works perfectly! (my case having table width 100% and no other columns have widths. Applied this to one column). Tested in IE7/8/9, Firefox 12 and Chrome 19. – marcovtwout Jun 20 '12 at 14:12
wow, never thought this is possible with html tables. Thank you! – kulpae Nov 12 '12 at 22:04
Nice little trick, I now use a `.snug` class for `th` and `td` cells that I want to have a "snug fit", with your properties plus 2px left and right padding. Other columns that don't have this class automatically share extra available space. Works a treat, thanks :-) – Amos M. Carpenter Nov 27 '12 at 03:21
14

Instead of manually adding the '.last' class, you can just do 'td:last-child' as the selector. – T.Ho Feb 13 '13 at 00:34
5

This solution works well without `table-layout: fixed` that is set in the css in the question http://jsfiddle.net/hCkch/1/ – David Sherret Jul 08 '13 at 19:34
`width: 1000px;`, or some other large value, may work better with IE. – yitwail Mar 23 '14 at 21:35
You may want to use `td:last-child` instead without the need to add `class="last"` to every last column. – Nickkk Jun 29 '16 at 15:06
1

Effing brilliant, mate! Really clever trick to "prioritize" certain columns to make sure they don't squished onto multiple lines by large "text" columns, like "Description" or "Notes". Nice one! To make it even more useful, I would call the class `.fitwidth` and then just set the class on the columns that you don't want going to multiple lines. I'll edit your answer to add that. – Joshua Pinter Apr 03 '19 at 23:36
can set min-width or max-width? – D T Sep 26 '19 at 09:47

score 29 · Answer 2 · answered Jan 21 '11 at 10:46

29

If you want to make sure that last row does not wrap and thus size the way you want it, have a look at

td {
 white-space: nowrap;
}

answered Jan 21 '11 at 10:46

Sander

1,244
1
12
24

acme · Answer 3 · 2011-01-24T13:37:57.767

~~You could specify the width of all but the last table cells and add a table-layout:fixed and a width to the table.~~

You could set

table tr ul.actions {margin: 0; white-space:nowrap;}

(or set this for the last TD as Sander suggested instead).

This forces the inline-LIs not to break. Unfortunately this does not lead to a new width calculation in the containing UL (and this parent TD), and therefore does not autosize the last TD.

This means: if an inline element has no given width, a TD's width is always computed automatically first (if not specified). Then its inline content with this calculated width gets rendered and the white-space-property is applied, stretching its content beyond the calculated boundaries.

So I guess it's not possible without having an element within the last TD with a specific width.

no good. that's exacly what i'm trying to awoid. i don't want o specify col widths. columns should auto size and the last col should be sized down to content inside it. — ShaneKm, Jan 21 '11 at 11:01
Can you provide the CSS-definitions for the classes you used? — acme, Jan 21 '11 at 11:09

score -3 · Answer 4 · answered Jan 24 '11 at 13:42

-3

use auto and min or max width like this:

td {
max-width:50px;
width:auto;
min-width:10px;
}

answered Jan 24 '11 at 13:42

Abudayah

3,816
7
40
60

1

This does not work as required, when I have smaller content it still uses max-width. – marcovtwout Jun 20 '12 at 14:14
min-width doe not apply to table cell. – Nick Sep 11 '13 at 16:25

CSS table column autowidth

4 Answers4

Flexible, Class-Based Solution

Linked