CSS table column autowidth

HtmlXhtmlCss

Html Problem Overview


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

Css:

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

Html Solutions


Solution 1 - Html

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>

Solution 2 - Html

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

Solution 3 - Html

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.

Solution 4 - Html

use auto and min or max width like this:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShaneKmView Question on Stackoverflow
Solution 1 - HtmlDoug AmosView Answer on Stackoverflow
Solution 2 - HtmlSanderView Answer on Stackoverflow
Solution 3 - HtmlacmeView Answer on Stackoverflow
Solution 4 - HtmlAbudayahView Answer on Stackoverflow