How To Make A Table With Equal Column Widths In CSS?

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 with equal column widths in CSS? Ask Question Asked 10 years, 9 months ago Modified 1 year, 10 months ago Viewed 157k times 90

I have a document containing a table like this:

<table> <tr> <td> Word </td> <td> Definition </td> </tr> <tr> <td> Word </td> <td> Definition </td> </tr> <tr> <td> Word </td> <td> Definition </td> </tr> </table>

Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned. I've tried many different options, e.g. width: 50%; text-align: left, but the results are always unusual. The results should look like this:

_________________________ | word | definition | |____________|____________| | word | definition | |____________|____________|

• I cannot adjust the table's actual code directly. I can only modify the CSS style.
• The answer in Make columns of equal width in <table> is not suitable, because I do not know the width of the page, and that width might vary.

How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?

• html
• css
• html-table

Share Improve this question Follow edited Nov 11, 2018 at 10:00 Brian Tompsett - 汤莱恩 5,8757272 gold badges6060 silver badges133133 bronze badges asked Feb 1, 2014 at 7:58 VillageVillage 24.2k5151 gold badges127127 silver badges166166 bronze badges 4

• 1 Do you have a fiddle with your attempts? Setting fixed widths and the text alignment on the cells should work – helion3 Commented Feb 1, 2014 at 8:00
• 17 Use table-layout: fixed; – Mr. Alien Commented Feb 1, 2014 at 8:01
• 50% width always works on cells, I'm guessing your problem is really with the table not being 100% in width. – slash197 Commented Feb 1, 2014 at 8:03
• Oh, I see. I had put padding on the outsides and between the cells. Also, some text that has really long words was pushing some tables to not be 50%/50%. – Village Commented Feb 1, 2014 at 8:35

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

You can set table-layout: fixed; on your table. Using this you can override the browser's automatic column resizing. Then column widths will be set based on the widths that you assign to the cells in the first row.

Share Improve this answer Follow edited Jan 29, 2023 at 3:38 Cam Jackson 12.3k88 gold badges4747 silver badges7979 bronze badges answered Feb 1, 2014 at 8:04 TechGuyTechGuy 4,5501515 gold badges5959 silver badges9494 bronze badges 2

• 1 MDN link: developer.mozilla.org/en-US/docs/Web/CSS/table-layout – Flimm Commented Jan 13, 2021 at 14:18
• This doesn't work for me with a dynamic width: width: auto. It has to be a static value. – RokeJulianLockhart Commented Aug 14 at 22:52

Add a comment | 49

I had the same issue in one of my projects, however it got fixed when I combined both the solutions above (Thanks to them). Here is my code snippet :

.Table{ width: 100%; table-layout: fixed; } Share Improve this answer Follow answered Nov 27, 2018 at 5:42 Mazhar MIKMazhar MIK 1,1621313 silver badges1414 bronze badges Add a comment | 31

The table should have width: 100% property. See example here

table{ width: 100%; border-collapse:collapse; } td{ width: 50%; text-align: left; border: 1px solid black; }

About the text alignment you said two different things:

Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned.

and then

How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?

If the first is what you want and you cannot change your HTML you can use td:first-child to style your first column differently.

If the second is your best option, just change the text-align value to center.

Share Improve this answer Follow edited Feb 1, 2014 at 9:25 answered Feb 1, 2014 at 8:04 Itay GalItay Gal 10.8k66 gold badges4242 silver badges7777 bronze badges 2

• 24 What if I have a dynamic number of columns? – Shimmy Weitzhandler Commented Nov 24, 2015 at 20:10
• override this property and set it using javascript with the average when you are rendering them – Jackal Commented Aug 28, 2020 at 12:55

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

Visit chat

Linked

2 Set td width by td number in a table 1 Problems while trying to center the a table's content and border line? 0 Dynamic width on table child 92 Make columns of equal width in <table> -2 How to center the divider line in an HTML table? 0 Resize the width of specific table cell without affecting others

Related

127 Table with 100% width with equal size columns 11 How do you make a 100% width table with the columns all equal width? 171 CSS table-cell equal width 92 Make columns of equal width in <table> 1 Equal Column width on a table created by divs 0 How can I make all table cell sizes the same width in css? 1 How can two columns in a table be made to have the same width? 3 Making two of 4 columns equal width 2 make the width of the table equal to the width of its columns in css 0 CSS Table uniform column widths

Hot Network Questions

• Darlington-driven PNP vs. MOSFET
• Was it really possible to damage my VGA card by programming it in assembly through its latches registers?
• In Catholic atonement theology, if God can save Mary from all sin without Christ, what was the point of Christ's death?
• Accused of violating NDA on thesis
• What is the best language to speak with locals in Singapore?
• Brushing pastries with jam
• Can I pretend that Spearman's = Pearson's correlation coefficients for meta analysis?
• Given a profit margin, how to determine the selling price?
• Why would you not issue orders to a facility?
• Need help to prove that a variable is extracted using pattern matching from a pair (or a dependent pair) in Lean 4
• What is the Calvinist/Reformed solution to the Problem of Hell?
• What is the origin of the term "Dog Character" in the context of fighting games?
• Naive proof that subgroup of free group is free, what's wrong?
• Why do some people write text all in lower case?
• Do hypotheses need a “how” explanation or are predictions enough to validate them?
• Understanding Linux 'top' command: Memory vs Swap display format confusion
• What are the ethical considerations regarding mandatory class participation?
• Pairwise (partial) equivalence of boolean functions
• Why does glm in R with family binomial(link="log") sometimes require start values?
• Why does C#'s Thread.MemoryBarrier() use "lock or" instead of mfence?
• Does the earliest known use of an "average" occur after the invention of calculus?
• Are Quantum Algorithms better than classical algorithms for all problems?
• How to draw this matrix with stairs and submatrices?
• How does the Warlock's invocation Gaze of Two Minds interact with a creature with the Invisible Condition?

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