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.

    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, 11 months ago Modified 8 years, 3 months ago Viewed 158k 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 badges61 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.5k6 gold badges57 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,18113 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 badges91 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.7k21 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
  • 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

674 Word-wrap in an HTML table 694 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

  • Is there a cause of action for intentionally destroying a sand castle someone else has built on a public beach?
  • Image of the sun on Yehoshua’s grave?
  • First instance of the use of immersion in a breathable liquid for high gee flight?
  • Ascon-128 cipher for 64-bits unique nonces
  • Understanding the benefit of non principal repayment loan
  • Is it possible to discover a "Universal formula" that generates and generalizes all odd Collatz numbers?
  • How to Modify 7447 IC Output to Improve 6 and 9 Display on a 7-Segment
  • Would a thermometer calibrated for water also be accurate for measuring the air temperature (or vice versa)?
  • When re-implementing software, does analyzing the original software's kernel-calls make the re-implementation a derived work?
  • What is the best way to prevent this ground rod from being a trip hazard
  • Why do we define the standard error to ignore bias (unlike MSE which includes bias)?
  • Measuring Hubble expansion in the lab
  • Second Layer Instruments in RatesLib
  • Does theory ladenness mean I have to throw out science ... and my senses?
  • How can I put logo on left of the page next to institute name?
  • writing two matrices in a clear and nice way
  • Is the "wavefunction collapse" interpretation consistent with relativity?
  • What is this FreeDOS kernel loader found on the “W3x4NTFS” disk image?
  • Why does the engine prefer a5 (pass pawn) over axb5 (pass pawn+win a pawn)?
  • How does FM preemphasis interact with maximum deviation?
  • Why didn't Kafka use quotation marks in this dialogue?
  • QGIS labeling: Why do we need a primary key for the auxiliary storage?
  • \MakeLowercase in \section
  • The MC dies a few years after an apocalypse, but wakes up years earlier, just days before it starts. Uses his knowledge to gain skills faster
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