How Do I Make One Table Column Fill All The Spare Horizontal Space?

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 How do I make one table column fill all the spare horizontal space? Ask Question Asked 13 years, 3 months ago Modified 2 years, 5 months ago Viewed 65k times 50

I have a HTML table consisting of 3 columns. It has a fixed width of 600px.

<table> <tr> <td>Name</td> <td>Qty</td> <td>Actions</td> </tr> </table>

I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and the Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.

Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?

• html
• css
• html-table

Share Improve this question Follow edited Jan 20, 2019 at 22:53 Brian Tompsett - 汤莱恩 5,8757272 gold badges6060 silver badges133133 bronze badges asked Aug 21, 2011 at 13:46 gsteinertgsteinert 1,35422 gold badges1010 silver badges1313 bronze badges 2

• did you try using nowrap? w3schools.com/tags/att_td_nowrap.asp . Note that the attribute is deprecated, and should be used with css, as specified there – Eran Zimmerman Gonen Commented Aug 21, 2011 at 13:51
• This doesn't solve my main problem, which was that the other two cells were too wide, not too narrow. But along with Ranta's answer, it's exactly what I'm looking for, thank you – gsteinert Commented Aug 21, 2011 at 14:01

Add a comment |

3 Answers 3

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

You can apply width="99%" on that column. For example:

<table> <tr> <td width="99%">Name</td> <td>Qty</td> <td>Actions</td> </tr> </table> Share Improve this answer Follow edited Mar 9, 2014 at 21:59 Sophie Alpert 143k3636 gold badges223223 silver badges243243 bronze badges answered Aug 21, 2011 at 13:54 RantaRanta 81577 silver badges66 bronze badges 5

• 8 This works great, as long as I use nowrap on the other cells. I feel a little stupid for not thinking of it now. Thanks – gsteinert Commented Aug 21, 2011 at 14:00
• 11 the width attribute is also deprecated, and css should be used instead: w3schools.com/tags/att_td_width.asp – Eran Zimmerman Gonen Commented Aug 21, 2011 at 14:05
• 5 Works fine in Firefox. In Webkit browsers, this will squish images that don't have the width set explicitly. – Arcolye Commented Dec 4, 2012 at 9:17
• You're a genius. This was driving me crazy. – AndrewLeonardi Commented Aug 26, 2016 at 16:56
• 1 Note this doesn't work with table-layout: fixed. With a fixed table-layout the column will actually get 100% of the width. – xr280xr Commented Feb 3, 2017 at 22:37

Add a comment | 4

you can use max-width:99%; on the first column and give fixed sizes on the other columns (I used pixels sized columns).

<table style="width: 100%;"> <tr> <td style="max-width: 99%"> Will max </td> <td style='width:110px;'> fixed size here </td> </tr> </table> Share Improve this answer Follow answered May 20, 2014 at 14:13 Loic LacommeLoic Lacomme 31533 silver badges55 bronze badges Add a comment | 3

For every column you want to be the minimum width: (1) set the CSS width to zero and (2) use white-space: nowrap to prevent the text from wrapping onto multiple lines.

table { width: 100%; } :where(th, td):not(.max) { width: 0; white-space: nowrap; } /* For demo purposes */ table, th, td { border: 1px solid gray; } <table> <tr> <th class="max">Name</th> <th>Qty</th> <th>Actions</th> </tr> <tr> <td class="max">Victoria Adelaide Mary Louisa</td> <td>233,546,443</td> <td>Abort Retry Fail</td> </tr> </table>

Share Improve this answer Follow answered Jun 3, 2022 at 20:57 mfluehrmfluehr 3,16322 gold badges2727 silver badges3434 bronze badges 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
• css
• html-table

or ask your own question.

• The Overflow Blog
• We'll Be In Touch - A New Podcast From Stack Overflow!
• The app that fights for your data privacy rights
• Featured on Meta
• More network sites to see advertising test
• We’re (finally!) going to the cloud!
• Call for testers for an early access release of a Stack Overflow extension...

Linked

0 How to adjust an stretchable ol and an absolute block inside a fixed container -1 How do I get a html tables column resizing to emulate a windows forms datagridview

Related

4 How do I divide the remaining horizontal space between two columns in an HTML table? 89 How do I get the rightmost column to fill the remaining space? 26 How to make table td taking up the whole width using css? 25 CSS Table with one column taking remaining space 2 Get table to fill remaining width 1 How do I make a table's columns fill the width not occupied by fixed-width columns? 0 html table -- set column to take remaining space, and at least 300px width 0 How to make a table column take up the same space as multiple other columns 0 Make Arbitrary Table Column Width Equal to Space Available 1 How to distribute free space between <table> columns evenly?

Hot Network Questions

• Did Superdana manufacture a 66 AC outlet power strip/surge protector?
• How does the Warlock's invocation Gaze of Two Minds interact with a creature with the Invisible Condition?
• Top loading an Aircraft vs bottom Loading
• How SMA (or RF) connector's impedance is measured and rated?
• Advantages of information criteria over cross-validation
• C# basic calculator
• Where in the Gospels does Jesus explain what 'The Truth' is?
• Why「记」for shop names?
• Condition IF in Tikz
• Why constrain the unit type by a generic trait bound in a where clause (as in `where () : Trait<…>`)?
• Why does VGA sync have 50 Ω drivers but 75 Ω cables?
• What is the correct article before "/s/ sound"?
• Am I correct in assuming during the merger with the Milky Way the structure of the Andromeda Galaxy will not be visible to the naked eye?
• What's the deal with De Morgan algebras and Kleene algebras?
• Missile Impact Velocity
• Remove vertical lines from a cell row
• I want to align Mathematics and class X vertically
• How can I solve a multi-delay differential equation?
• Nomenclature for Swap Spreads
• why can I not fund my regtest named wallet?
• How to generate short 60V pulses from 3V source?
• Finite subgroups of multiplicative complex numbers.
• How to protect against fake gold bars?
• Topology generated by seminorm, why not just take supremum

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