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

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support. 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

• Trump's tariff plan
• Wouldn't the ban of TikTok violate freedom of speech?
• Is it likely these VL53L0X IC's sold on aliexpress are counterfeit or stolen?
• Does length contraction "break the speed limit"?
• p column type stops compilation in RevTeX
• Reducing wattage of a portable car heater
• 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?
• Integrate function involving Mod[]
• How to prune the rows of a Table
• Standard SMD chip resistor with higher power in the same package
• How to Draw a Diagram with a Custom Coordinate System and Shaded Areas?
• How to find file names but only with grep .html OR .php?
• Mega Man: Powered Up
• If the hard problem of consciousness is unanswerable, is it a hard problem or just a bad question?
• Sub panel location question
• Can this strong directional blur at wide apertures still be explained by the usual arguments?
• Deutsche Bahn Berlin: can I use a different departure station?
• Can one publication contribute to two separate grants?
• What powers do police have to force people onto trains?
• How to design for API use cases that need different data from the same table?
• A fantasy story with an imp in a box that paints pictures
• Angular orientation of exact solution of the Hydrogen Schrödinger Equation
• Table tennis tournament scoreboard
• How can I avoid overusing her/she or the character name when describing character action

more hot questions lang-html