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

Just browsing Stack Overflow? Help us improve your experience. Sign up for research
    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 Table cell widths - fixing width, wrapping/truncating long words Ask Question Asked 15 years, 10 months ago Modified 8 years, 2 months ago Viewed 157k 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,87572 gold badges60 silver badges133 bronze badges asked Jan 15, 2009 at 12:56 Richard Ev's user avatar Richard EvRichard Ev 54k61 gold badges194 silver badges280 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,2931 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
  • 1 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.4k6 gold badges55 silver badges83 bronze badges answered Jan 15, 2009 at 13:05 Diodeus - James MacFarlane's user avatar Diodeus - James MacFarlaneDiodeus - James MacFarlane 114k33 gold badges163 silver badges180 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,17113 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 | 4 <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.9k18 gold badges90 silver badges132 bronze badges answered Jun 1, 2015 at 12:14 Mukund Thakkar's user avatar Mukund ThakkarMukund Thakkar 1,28514 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 90512 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.6k21 gold badges164 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
  • 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

673 Word-wrap in an HTML table 691 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

  • Why is it safe to soak an electric motor in isopropyl alcohol but not distilled water?
  • How to show "— "character
  • T47 to BSA bottom bracket adapter - good idea?
  • Clarification and Proof of Inequality (8.11) in Analytic Number Theory by Iwaniec and Kowalski
  • Why Adam and Eve were created naked?
  • What do border officials do with my passport when I tell them that I'm entering as the spouse of an EU national?
  • It will not last
  • What mechanism could cause a person not to cast a reflection?
  • Weapon Mastery and Weapon Cantrips
  • Why didn't Steve Zahn receive a credit for Silo?
  • "Elegant" conditions on two quadratics (with positive real roots) to ensure that the larger root of one is less than the smaller root of the other
  • Skylab's Boom during EVA
  • A novel about Earth crossing a toxic cloud of cosmic size
  • Why is bash startup executed under non-interactive ssh
  • How can I solve my equation with the best numerical precision?
  • What powers do police have to force people onto trains?
  • How much ebikes actually benefit from ebike specific wheels, tires, and forks?
  • How to reorder pages after rendering?
  • Student is almost always late, and expects me to re-explain everything he missed
  • Solving Large size problems in industry: Tips and Tricks
  • Are there any examples of exponential algorithms that use a polynomial-time algorithm for a special case as a subroutine (exponentially many times)?
  • Why sand dunes appear dark in Sentinel-1 SAR Images but bright in optical images
  • Is there a cryptographic method that can only decrypt for a certain range of seeds?
  • Configure Linux to regularly sync cached data to disk
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