Html - Table Cell Widths - Fixing Width, Wrapping/truncating Long Words

Trang chủ » Html Table Fixed Column Width Not Word Wrap » Html - Table Cell Widths - Fixing Width, Wrapping/truncating Long Words

Có thể bạn quan tâm

    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 Table cell widths - fixing width, wrapping/truncating long words Ask Question Asked 15 years, 5 months ago Modified 7 years, 9 months ago Viewed 156k times 41

I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a break in long words then that's OK.

I cannot figure out any way of getting this to work.

This is for an internal client application so needs to work in IE6 and IE7 only.

An example page is below. The cell containing onereallylongword is the offending one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> td { width: 30px; } </style> </head> <body> <table border="2"> <tr> <td>word</td> <td>two words</td> <td>onereallylongword</td> </tr> </table> </body> </html>
  • html
  • css
  • user-interface
  • html-table
Share Improve this question Follow edited Sep 16, 2016 at 10:40 Brian Tompsett - 汤莱恩's user avatar Brian Tompsett - 汤莱恩 5,83772 gold badges60 silver badges132 bronze badges asked Jan 15, 2009 at 12:56 Richard Ev's user avatar Richard EvRichard Ev 53.8k61 gold badges192 silver badges278 bronze badges 1
  • Essentially a duplicate of http://stackoverflow.com/questions/416401/using-css-to-create-table-cells-of-a-specific-width-with-no-word-wrapping Sadly, the best answer I'm aware of is wrapping the <td> contents in a <div> and applying the fixed width and overflow to that. – annakata Commented Jan 15, 2009 at 13:08
Add a comment |

7 Answers 7

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

As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> td { width: 30px; overflow: hidden; } table { width : 90px; table-layout: fixed; } </style> </head> <body> <table border="2"> <tr> <td>word</td> <td>two words</td> <td>onereallylongword</td> </tr> </table> </body> </html>

I've tested this in IE6 and 7 and it seems to work fine.

Share Improve this answer Follow answered Jan 15, 2009 at 13:21 inferis's user avatar inferisinferis 1,3031 gold badge9 silver badges15 bronze badges 4
  • That works well - however in my scenario the number of columns is variable and it will be complex for me to calculate the total width of the table. – Richard Ev Commented Jan 15, 2009 at 14:51
  • 1 @RichardEv As far as I have checked with Chrome, the width the be specified for the table can be anything. So, you can just set it as 0. – sawa Commented Feb 21, 2012 at 7:09
  • Instead of using overflow: hidden for <td> I'm using word-wrap: break-word. Better when you don't want hide the overflow – instead Commented Apr 26, 2014 at 11:37
  • This shit works... Specially that table-layout:fixed. I had tried all the other stuff none seem to work. – Saras Arya Commented Sep 30, 2015 at 7:00
Add a comment | 21

If you want to the long text wrapped properly in new lines then in your table id call use a css property table-layout:fixed; otherwise simply css can't break the long text in new lines.

Share Improve this answer Follow answered Apr 28, 2011 at 7:07 Katie's user avatar KatieKatie 3814 silver badges5 bronze badges 3
  • Just brilliant. Worked like a charm after setting this. – NLV Commented Jan 31, 2012 at 12:52
  • 1 Please @stackoverflow, show this answer right on top. Perfect and simple solution. Just tinkered with the upper ones first and than realised this one. – Stephan Hoyer Commented Jan 9, 2017 at 12:31
  • This sln. is best as it allows to apply styling to the whole table and not only the content of a cell. – count0 Commented Nov 12, 2019 at 20:19
Add a comment | 18

Stack Overflow has solved a similar problem with long lines of code by using a DIV and having overflow-x:auto. CSS can't break up words for you.

Share Improve this answer Follow edited Sep 30, 2015 at 0:34 Nayuki's user avatar Nayuki 18.2k6 gold badges54 silver badges83 bronze badges answered Jan 15, 2009 at 13:05 Diodeus - James MacFarlane's user avatar Diodeus - James MacFarlaneDiodeus - James MacFarlane 114k33 gold badges160 silver badges179 bronze badges 6
  • 4 auto overflow results in scrollbars being added - in my case it looks like I will be better off using overflow: hidden. – Richard Ev Commented Jan 15, 2009 at 14:50
  • 3 word-wrap: break-word doesn't break up words? – Iulian Onofrei Commented Jun 5, 2014 at 10:57
  • 1 It will on spaces, but not on long words that overflow. – Diodeus - James MacFarlane Commented Jun 5, 2014 at 12:57
  • 5 @Diodeus what about "word-break: break-all;" – Mohd Abdul Mujib Commented Mar 31, 2015 at 1:38
  • Try white-space: nowrap; – msilveus Commented Jun 10, 2016 at 18:15
| Show 1 more comment 13

Try this:

text-overflow: ellipsis; overflow: hidden; white-space:nowrap; Share Improve this answer Follow edited Jul 21, 2012 at 12:43 Nikola K.'s user avatar Nikola K. 7,16113 gold badges32 silver badges39 bronze badges answered Jul 21, 2012 at 12:32 Anupam's user avatar AnupamAnupam 2102 silver badges4 bronze badges 0 Add a comment | 3 <style type="text/css"> td { word-wrap: break-word;max-width:50px; } </style> Share Improve this answer Follow edited Jun 1, 2015 at 13:50 Michael Irigoyen's user avatar Michael Irigoyen 22.8k18 gold badges90 silver badges132 bronze badges answered Jun 1, 2015 at 12:14 Mukund Thakkar's user avatar Mukund ThakkarMukund Thakkar 1,27514 silver badges21 bronze badges Add a comment | 2

I realize you needed a solution for IE6/7 but I'm just throwing this out for anyone else.

If you can't use table-layout: fixed and you don't care about IE < 9 this works for all browsers.

td { overflow-x: hidden; overflow-y: hidden; white-space: nowrap; max-width: 30px; } Share Improve this answer Follow answered Mar 18, 2013 at 17:10 shrimpwagon's user avatar shrimpwagonshrimpwagon 88512 silver badges23 bronze badges Add a comment | -7

try td {background-color:white}

It just worked for a column I didn't want to get trampled by a previous column's long text.

Share Improve this answer Follow edited Apr 28, 2011 at 17:43 kapa's user avatar kapa 78.4k21 gold badges162 silver badges177 bronze badges answered Apr 14, 2009 at 8:55 user90588user90588 2
  • I'm not sure that would work - the previous column's long text will surely cause the width of that column to expand. Could you edit your reply to contain an example HTML snipped to illustrate? – Richard Ev Commented Apr 14, 2009 at 9:27
  • 2 I don't see how setting background-color to white could help here ? – dwarfy Commented Apr 28, 2011 at 8:35
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
  • user-interface
  • html-table
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

671 Word-wrap in an HTML table 682 Set the table column width constant regardless of the amount of text in its cells? 6 Using CSS to create table cells of a specific width with no word wrapping 1 Grid or Table, is it possible to make the content of some cells decide the width of a column and not others? 18 How to break long words in a table td? 1 In HTML Table how do you force cell text to truncate and not increase the width of the cell or wrap 3 Ensure that table cell widths are respected 2 Make text word-wrap in an HTML table 6 CSS - Keep Table Cell from Expanding and Truncate Long Text 0 Make HTML table cell's content fit - without wrapping? 2 How can I avoid words wrapping in my table <td> cells? 2 Wrap table cell with long word 4 How to force word wrap on table with width auto? 1 table cell, wrapped text, fit width to content, remove extra right hand white space

Hot Network Questions

  • Remove duplicates in file (without sorting!) leaving the _last_ of the occurences
  • Did the BBC censor a non-binary character in Transformers: EarthSpark?
  • Why should I meet my advisor even if I have nothing to report?
  • Hölder continuity in time of heat semigroup
  • Does concentrating on a different spell end a concentration spell?
  • Is it unfair to retroactively excuse a student for absences?
  • Does the decision of North Korea sending engineering troops to the occupied territory in Ukraine leave them open to further UN sanctions?
  • How many steps are needed to turn one "a" into at least 100,000 "a"s using only the three functions of "select all", "copy" and "paste"?
  • Why can't LaTeX (seem to?) Support Arbitrary Text Sizes?
  • Examples of distribution for which first-order condition is not enough for MLE
  • Position where last x halfmoves are determined
  • Unsorted Intersection
  • Ideal diode in parallel with resistor and voltage source
  • Did Tolkien give his son explicit permission to publish all that unfinished material?
  • exploded pie chart, circumscribing arc, and text labels
  • Are there conditions for an elliptic Fq-curve to have a quadratic Fq-cover of the line without ramification Fq-points?
  • Cathay Pacific Online Booking: When to Enter Passport Details?
  • How much time do I need on my Passport expiry date to leave Australia for South Africa?
  • Times of a hidden order
  • Boundary Conditions on the Inlet and Outlet in a Discontinuous Galerkin framework
  • Staying in USA longer than 3 months
  • 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
  • Do Christians believe that Jews and Muslims go to hell?
  • Correlation for Small Dataset?
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

Từ khóa » Html Table Fixed Column Width Not Word Wrap