CSS Table Column Autowidth - Stack Overflow

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs CSS table column autowidth Ask Question Asked 13 years, 10 months ago Modified 2 years, 1 month ago Viewed 318k times 138

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>

• html
• xhtml
• css

Share Improve this question Follow edited Oct 3, 2022 at 23:04 Nickofthyme 4,2182828 silver badges4646 bronze badges asked Jan 21, 2011 at 10:44 ShaneKmShaneKm 21.3k4646 gold badges174174 silver badges307307 bronze badges Add a comment |

4 Answers 4

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 281

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> Share Improve this answer Follow edited Apr 3, 2019 at 23:41 Joshua Pinter 47.3k2323 gold badges255255 silver badges252252 bronze badges answered Jun 1, 2012 at 15:36 Doug AmosDoug Amos 4,36311 gold badge2323 silver badges2424 bronze badges 11

• 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 Commented Jun 20, 2012 at 14:12
• wow, never thought this is possible with html tables. Thank you! – kulpae Commented Nov 12, 2012 at 22:04
• 14 Instead of manually adding the '.last' class, you can just do 'td:last-child' as the selector. – T.Ho Commented Feb 13, 2013 at 0:34
• 5 This solution works well without table-layout: fixed that is set in the css in the question jsfiddle.net/hCkch/1 – David Sherret Commented Jul 8, 2013 at 19:34
• 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 Commented Apr 3, 2019 at 23:36

| Show 6 more comments 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; } Share Improve this answer Follow answered Jan 21, 2011 at 10:46 SanderSander 1,27411 gold badge1313 silver badges2626 bronze badges 0 Add a comment | 3

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.

Share Improve this answer Follow edited Jan 24, 2011 at 13:37 answered Jan 21, 2011 at 10:46 acmeacme 14.8k77 gold badges7676 silver badges114114 bronze badges 2

• 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 Commented Jan 21, 2011 at 11:01
• Can you provide the CSS-definitions for the classes you used? – acme Commented Jan 21, 2011 at 11:09

Add a comment | -3

use auto and min or max width like this:

td { max-width:50px; width:auto; min-width:10px; } Share Improve this answer Follow answered Jan 24, 2011 at 13:42 community wiki Abudayah 2

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

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• xhtml
• css

or ask your own question.

• The Overflow Blog
• Your docs are your infrastructure
• Featured on Meta
• More network sites to see advertising test [updated with phase 2]
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

433 Fit cell width to content 26 Adjust table column width to content size 4 How to make a column auto width in fixed layout table in 2018 3 CSS table column autowidth in HTML Outlook e-mail 1 Get table cells to collapse horizontally 0 How can I make the width of a <td> to auto?

Related

1 possible to get table columns to auto width to fill screen? 11 Auto width on tables 0 Setting column width in HTML table 9 Fixed column width in HTML table 0 Intelligent HTML Table Column Widths 1 Table columns to be fixed width no matter what content? 1 setting HTML table column width 2 HTML table, fixed width autofit columns 1 Create a Table with auto width <td> 4 html table column width

Hot Network Questions

• Skylab's Boom during EVA
• Schrödinger's cat ++
• Map or Thread operation for list
• Why is bash startup executed under non-interactive ssh
• Standard SMD chip resistor with higher power in the same package
• I can't put a plug into a leviton GFCI new outlet
• Why is Anarchism not considered fundamentally against the "democratic order" in Germany?
• What style/Form is the Stranger's Poem in, from The Magnus Archives?
• Can one publication contribute to two separate grants?
• Are there any examples of exponential algorithms that use a polynomial-time algorithm for a special case as a subroutine (exponentially many times)?
• Sub panel location question
• When did Storm Troopers stop being clones?
• Is there a commonly used expression for adjusting a training or form of support to a person's specific situation and needs?
• A fantasy story with an imp in a box that paints pictures
• Do I need Letter of invitation to Iceland?
• How can I avoid overusing her/she or the character name when describing character action
• Arrange 3 red balls and 33 white balls randomly in a circle. What is the probability that there are no more than 13 consecutive white balls?
• Is there evidence that Kurt Gödel took his proof of the existence of God to be conclusive?
• Can I use the NEEWER QPRO-N on Canon R6 with NEEWER Z2-C 2,4G TTL Flash units if I don't need ETTL?
• Is there a symbol for the Hyper key?
• Sequence with diagonal lines and circles
• Mega Man: Powered Up
• Has anyone else compared a Magloop to a Vertical?
• How do I remove a hat from my horse?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html