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.

   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 Force table column widths to always be fixed regardless of contents Ask Question Asked 11 years, 9 months ago Modified 3 years, 3 months ago Viewed 404k times 126

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 154k9696 gold badges421421 silver badges335335 bronze badges asked Mar 27, 2013 at 20:18 datadamnationdatadamnation 1,88233 gold badges1616 silver badges1818 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) 224

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 badges3434 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%;. – larv 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,14511 gold badge2525 silver badges6262 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.7k22 gold badges4343 silver badges6767 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 9181616 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,96233 gold badges3131 silver badges5353 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 32.4k1717 gold badges143143 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 AI apps are like Google Search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

694 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

88 HTML table: keep the same width for columns 694 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

• How can bevel one end of cube so that it transitions into a rounded end on the other end?
• If God is good, why does "Acts of God" refer to bad things?
• Can SHA-256 be used as a crude replacement for cryptographic signing?
• writing two matrices in a clear and nice way
• A world with limited collective ability
• Growing plants on mars to increase the oxygen level
• Hebrews 2:11 - If we are brothers of Jesus and share in our Father's inheritance, and Jesus is God, does that imply we also are God?
• What HDD copy strategy is best between manually syncing and rewriting from scratch?
• exploratory factor analysis, non-normal data
• What happened to 1T-SRAM?
• Does gravity from a star go through a black hole's event horizon to affect objects on the other side?
• Manathermy: effects on the ecosystem
• What's left of wine or vodka after the water and alcohol is boiled off?
• Why did Herod want to know the time of appearance of the Star of Bethlehem?
• Helping daughter with taxes - How do I report some freelance work for her?
• Are informal nominee arrangements legal?
• Varying output from single file
• Why didn't Kafka use quotation marks in this dialogue?
• Is a rational decision (or claim) incompatible with determinism?
• Image of the sun on Yehoshua’s grave?
• Free Kei Friday
• 3 phase asynchronous motors in tandem
• Are their any advanatges of a lower value of a loss function?
• Why are so many problems linear and how would one solve nonlinear problems?

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