Force Table Column Widths To Always Be Fixed Regardless Of Contents

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.

   Explore Teams Create a free Team
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 Force table column widths to always be fixed regardless of contents Ask Question Asked 11 years, 3 months ago Modified 2 years, 9 months ago Viewed 397k times 124

I have an html table with table-layout: fixed and a td with a set width. The column still expands to hold the contents of text that doesn't contain a space. Is there a way to fix this other than wrapping the contents of each td in a div?

Example: http://jsfiddle.net/6p9K3/29/

<table> <tbody> <tr> <td style="width: 50px;">Test</td> <td>Testing 1123455</td> </tr><tr> <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td>B</td> </tr> </tbody> </table> table { table-layout: fixed; } td { border: 1px solid green; overflow: hidden; }

In the example, you can see that the column with AAAAAAAAAAAA... expands despite being explicitly set to 50px wide.

• html
• css

Share Improve this question Follow edited Jul 13, 2015 at 22:38 Eric Leschinski 152k9696 gold badges420420 silver badges335335 bronze badges asked Mar 27, 2013 at 20:18 datadamnationdatadamnation 1,86233 gold badges1616 silver badges1717 bronze badges 1

• 1 Duplicate of stackoverflow.com/q/4457506/1190388 – hjpotter92 Commented Mar 27, 2013 at 20:22

Add a comment |

8 Answers 8

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

Specify the width of the table:

table { table-layout: fixed; width: 100px; }

See jsFiddle

Share Improve this answer Follow answered Mar 27, 2013 at 20:26 Arie XiaoArie Xiao 14k33 gold badges3333 silver badges3131 bronze badges 4

• 2 It trims the content – Vikash Commented Apr 4, 2016 at 2:17
• 13 Amazing! it also works perfect with table-layout: fixed; width: 100%;. – Lucas Reppe Welander Commented Apr 6, 2017 at 9:30
• This works, but why is it necessary? Why does table-layout: fixed; allow content to override the fixed width of each column in the first place? – Patrick Szalapski Commented Aug 24, 2021 at 19:53
• If you don't want the content to be trimmed, at least you can make a scrollable cell: stackoverflow.com/a/11810223/4513925 – Yahya Commented Jun 9, 2023 at 4:01

Add a comment | 26

Try looking into the following CSS:

word-wrap:break-word;

Web browsers should not break-up "words" by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.

You would need to set a width on the overall table then a width on the columns. "width:100%;" should also be OK depending on your requirements.

Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.

Share Improve this answer Follow edited Mar 27, 2013 at 20:29 answered Mar 27, 2013 at 20:22 Drew AndersonDrew Anderson 54233 silver badges1414 bronze badges 2

• 3 This, combined with Arie Shaw's answer, got me the behavior I was looking for. The column is always the same width regardless of text, and it wraps the text even if there are no spaces. – datadamnation Commented Mar 27, 2013 at 21:00
• I'm looking for something like this, however this seems not to work if table is not set to table-layout: fixed. However table-layout fixed is not css stylable if the table head th has a colspan. How you make word-wrap working in a table? stackoverflow.com/questions/42371945/… – Manuel Commented Feb 21, 2017 at 15:57

Add a comment | 18

Make the table rock solid BEFORE the css. Figure your width of the table, then use a 'controlling' row whereby each td has an explicit width, all of which add up to the width in the table tag.

Having to do hundreds html emails to work everywhere, using the correct HTML first, then styling w/css will work around many issues in all IE's, webkit's and mozillas.

so:

<table width="300" cellspacing="0" cellpadding="0"> <tr> <td width="50"></td> <td width="100"></td> <td width="150"></td> </tr> <tr> <td>your stuff</td> <td>your stuff</td> <td>your stuff</td> </tr> </table>

Will keep a table at 300px wide. Watch images that are larger than the width by extremes

Share Improve this answer Follow edited Mar 22, 2016 at 10:46 Obsidian Phoenix 4,13311 gold badge2424 silver badges6161 bronze badges answered Mar 27, 2013 at 20:20 kelly johnsonkelly johnson 1,63633 gold badges1717 silver badges2727 bronze badges 2

• 3 w3school says not supported in html5 – v.oddou Commented Dec 24, 2019 at 9:54
• 2 The width attribute is deprecated, you either use the CSS width property or, the recommended HTML 5 way to set column width, use <colgroup> and <col> elements right after the <table> tag and before any <thead>, <tbody> or <tr> elements. – S. Esteves Commented May 29, 2020 at 2:46

Add a comment | 10

You can add a div to the td, then style that. It should work as you expected.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Then the css.

td div { width: 50px; overflow: hidden; } Share Improve this answer Follow answered Mar 27, 2013 at 20:26 John FisherJohn Fisher 22.5k22 gold badges4141 silver badges6666 bronze badges Add a comment | 5

You can also use percentages, and/or specify in the column headers:

<table width="300"> <tr> <th width="20%">Column 1</th> <th width="20%">Column 2</th> <th width="20%">Column 3</th> <th width="20%">Column 4</th> <th width="20%">Column 5</th> </tr> <tr> <!--- row data --> </tr> </table>

The bonus with percentages is lower code maintenance: you can change your table width without having to re-specify the column widths.

Caveat: It is my understanding that table width specified in pixels isn't supported in HTML 5; you need to use CSS instead.

Share Improve this answer Follow answered Feb 15, 2019 at 14:45 PfunnyGuyPfunnyGuy 8981515 silver badges2727 bronze badges Add a comment | 3

You can also work with "overflow: hidden" or "overflow-x: hidden" (for just the width). This requires a defined width (and/or height?) and maybe a "display: block" as well.

"Overflow:Hidden" hides the whole content, which does not fit into the defined box.

Example:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1"> <tr> <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> <td>bbb</td> <td>cccc</td> </tr> </table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Shame on me, I've seen, you already use "overflow". I guess it doesn't work, because you don't set "display: block" to your element ...

Share Improve this answer Follow edited Mar 27, 2013 at 20:37 answered Mar 27, 2013 at 20:28 Stefan BrendleStefan Brendle 1,56466 gold badges2020 silver badges3939 bronze badges Add a comment | 0

I would try setting it to:

max-width: 50px; Share Improve this answer Follow edited Jun 26, 2021 at 14:22 linktoahref 7,91233 gold badges3131 silver badges5252 bronze badges answered Mar 27, 2013 at 20:20 AlexAlex 10533 silver badges1010 bronze badges 1

• and width:50px; if you really want to be fixed width. – Adrian P. Commented Jan 15, 2018 at 21:26

Add a comment | -3

This works for me

td::after { content: ''; display: block; width: 30px; } Share Improve this answer Follow edited Sep 23, 2021 at 13:03 AmerllicA 31.4k1717 gold badges140140 silver badges166166 bronze badges answered May 15, 2019 at 12:42 MikeyMoMikeyMo 10511 silver badge33 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

or ask your own question.

• The Overflow Blog
• How to build open source apps in a highly regulated industry
• Community Products Roadmap Update, July 2024
• Featured on Meta
• We spent a sprint addressing your requests — here’s how it went
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• Policy: Generative AI (e.g., ChatGPT) is banned
• The [lib] tag is being burninated
• What makes a homepage useful for logged-in users

Linked

682 Set the table column width constant regardless of the amount of text in its cells? 65 Setting max-height for table cell contents 2 Set forced width with css on <td> which is under <th> with colspan without using colgroup

Related

87 HTML table: keep the same width for columns 682 Set the table column width constant regardless of the amount of text in its cells? 4 HTML/CSS - how can I make my table columns never go wider what i speficy as width 9 Fixed column width in HTML table 1 Make HTML table columns fixed width (and stretch to fit) 0 Forcing <table> Columns to a Fixed Width; Prevent Automatic Expand 7 Force table column to not excess given css width 1 HTML: Make table column width fixed 0 Table with fixed column width, regardless of container 2 How to make the column width of the table fixed?

Hot Network Questions

• Who originated the idea that the purpose of government is to protect its citizens?
• What's the point of Dream Chaser?
• How well does the following argument work as a counter towards unfalsifiable supernatural claims?
• Phantom points in QGIS do not dissapear
• Cathay Pacific Online Booking: When to Enter Passport Details?
• Unsorted Intersection
• I want to leave my current job during probation but I don't want to tell the next interviewer I am currently working
• Sitting on a desk or at a desk? What's the diffrence?
• What’s the highest salary the greedy king can arrange for himself?
• How to maintain dependencies shared among microservices?
• What does a letter "R" means in a helipad?
• Does the decision of North Korea sending engineering troops to the occupied territory in Ukraine leave them open to further UN sanctions?
• lme4 Inconsistency
• Dagesh on final letter kaf
• Line from Song KÄMPFERHERZ
• common.apex.runtime.impl.ExecutionException: Unrecognized base64 character: [
• Staying in USA longer than 3 months
• Does the Ogre-Faced Spider regenerate part of its eyes daily?
• Is non-temperature related Symmetry Breaking possible?
• Book that I read around 1975, where the main character is a retired space pilot hired to steal an object from a lab called Menlo Park
• Does concentrating on a different spell end a concentration spell?
• Examples of distribution for which first-order condition is not enough for MLE
• Is it unfair to retroactively excuse a student for absences?
• Joint measurability in quantum mechanics

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