How To Make A Table Cell Stretch For The Rest Of The Width? [duplicate]

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 How to make a table cell stretch for the rest of the width? [duplicate] Ask Question Asked 6 years, 4 months ago Modified 6 years, 4 months ago Viewed 25k times 8 This question already has answers here: How to make last cell of a row in a table occupy all remaining width (1 answer) CSS Table with one column taking remaining space (6 answers) HTML table last td to take remaining width (2 answers) Closed 6 years ago.

I'm trying to create a simple table with 3 columns: the first/last should take the exact width of their children and the middle one should stretch and fill the rest of it.

.table { display: table; width: 100%; }

I've tried using both <table> element, as well as flex - but not sure how to achieve this.

I can do it per line using flex, but then the first/last columns won't be aligned across rows. In addition, I don't want to set a fixed width for the first/last column.

• html
• css
• flexbox

Share Improve this question Follow edited Jul 12, 2018 at 18:52 Temani Afif 269k2828 gold badges358358 silver badges472472 bronze badges asked Jul 12, 2018 at 18:51 Gilad NovikGilad Novik 4,59444 gold badges4242 silver badges6060 bronze badges 2

• 1 add width:100% to the middle one – Temani Afif Commented Jul 12, 2018 at 18:52
• 2 @TemaniAfif OMG, it's that simple, it works!!! – Gilad Novik Commented Jul 12, 2018 at 18:56

Add a comment |

2 Answers 2

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

You can do this with this CSS code :

.table tr td:nth-child(2) { width:100% } Share Improve this answer Follow answered Jul 12, 2018 at 19:00 PierreNPierreN 97844 silver badges1111 bronze badges Add a comment | 4

Based on @TemaniAfif comment, the answer is very simple:

<table> <tr> <td>1</td> <td style='width: 100%;'>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>-</td> <td>6</td> </tr> </table> Share Improve this answer Follow answered Jul 12, 2018 at 18:59 Gilad NovikGilad Novik 4,59444 gold badges4242 silver badges6060 bronze badges Add a comment |

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

• html
• css
• flexbox

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

86 How to make last cell of a row in a table occupy all remaining width 25 CSS Table with one column taking remaining space 11 HTML table last td to take remaining width 1 How can I get one dynamic width table column (with fixed widths for the other columns)

Related

2811 Make a div fill the height of the remaining screen space 2697 How to make a div 100% height of the browser window 3321 How do I disable the resizable property of a textarea? 2520 How can I make a div not larger than its contents? 2070 How do I make a placeholder for a 'select' box? 582 Flex-box: Align last row to grid 2550 How do I reduce the opacity of an element's background using CSS? 585 Why don't flex items shrink past content size? 369 Fill remaining vertical space with CSS using display:flex 3065 How do I modify the URL without reloading the page?

Hot Network Questions

• If someone’s words are likely to be disregarded, how to describe the quality of “meaning” they lack?
• How can I avoid overusing her/she or the character name when describing character action
• Integrate function involving Mod[]
• arXiv - is it possible to upload there an abstract and only within a week the text itself?
• How to say "Each one of the following" in German?
• What's a good way to append a nonce to ciphertext in Python for AES GCM in Python?
• Do I need Letter of invitation to Iceland?
• Isa 53:9 - Grave of wicked or rich?
• Angular orientation of exact solution of the Hydrogen Schrödinger Equation
• Shell Script to Normalize the data
• How much do ebikes actually benefit from ebike specific wheels, tires, and forks?
• Can this strong directional blur at wide apertures still be explained by the usual arguments?
• Are there any examples of exponential algorithms that use a polynomial-time algorithm for a special case as a subroutine (exponentially many times)?
• How do you calculate the number of skid patches on a fixie?
• Problem with highlighting first row and column of a table
• Polynomial.java - a Java class for dealing with polynomials with BigDecimal coefficients
• Trump's tariff plan
• Wouldn't the ban of TikTok violate freedom of speech?
• If scent means a pleasant smell, why do we say "lovely scent" or "sweet scent"?
• Map or Thread operation for list
• Walks in Nice (Nizza)
• How to combine the multiple collections as a collection in geometry node?
• If the hard problem of consciousness is unanswerable, is it a hard problem or just a bad question?
• How to identify unsafe trees for climbing stand?

more hot questions lang-html