Table cell widths - fixing width wrapping truncating long words

Question

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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt style type  text css  gt          td   width  30px         lt  style gt   lt  head gt   lt body gt       lt table border  2  gt           lt tr gt               lt td gt word lt  td gt               lt td gt two words lt  td gt               lt td gt onereallylongword lt  td gt           lt  tr gt       lt  table gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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  lt  9 this works for all browsers   td       overflow-x  hidden      overflow-y  hidden      white-space  nowrap      max-width  30px

User · Answer

As long as you fix the width of the table itself and set the table-layout property  this is pretty simple     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt style type  text css  gt          td   width  30px  overflow  hidden            table   width   90px  table-layout  fixed         lt  style gt   lt  head gt   lt body gt        lt table border  2  gt           lt tr gt               lt td gt word lt  td gt               lt td gt two words lt  td gt               lt td gt onereallylongword lt  td gt            lt  tr gt       lt  table gt   lt  body gt   lt  html gt    I ve tested this in IE6 and 7 and it seems to work fine

User · Answer

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

User · Answer

As long as you fix the width of the table itself and set the table-layout property  this is pretty simple     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt style type  text css  gt          td   width  30px  overflow  hidden            table   width   90px  table-layout  fixed         lt  style gt   lt  head gt   lt body gt        lt table border  2  gt           lt tr gt               lt td gt word lt  td gt               lt td gt two words lt  td gt               lt td gt onereallylongword lt  td gt            lt  tr gt       lt  table gt   lt  body gt   lt  html gt    I ve tested this in IE6 and 7 and it seems to work fine

User · Answer

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

User · Answer

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

User · Answer

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  lt  9 this works for all browsers   td       overflow-x  hidden      overflow-y  hidden      white-space  nowrap      max-width  30px

User · Answer

lt style type  text css  gt  td   word-wrap  break-word max-width 50px                 lt  style gt

User · Answer

lt style type  text css  gt  td   word-wrap  break-word max-width 50px                 lt  style gt

User · Answer

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

User · Answer

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

User · Answer

Try this   text-overflow  ellipsis   overflow  hidden   white-space nowrap

User · Answer

As long as you fix the width of the table itself and set the table-layout property  this is pretty simple     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt style type  text css  gt          td   width  30px  overflow  hidden            table   width   90px  table-layout  fixed         lt  style gt   lt  head gt   lt body gt        lt table border  2  gt           lt tr gt               lt td gt word lt  td gt               lt td gt two words lt  td gt               lt td gt onereallylongword lt  td gt            lt  tr gt       lt  table gt   lt  body gt   lt  html gt    I ve tested this in IE6 and 7 and it seems to work fine

User · Answer

As long as you fix the width of the table itself and set the table-layout property  this is pretty simple     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt style type  text css  gt          td   width  30px  overflow  hidden            table   width   90px  table-layout  fixed         lt  style gt   lt  head gt   lt body gt        lt table border  2  gt           lt tr gt               lt td gt word lt  td gt               lt td gt two words lt  td gt               lt td gt onereallylongword lt  td gt            lt  tr gt       lt  table gt   lt  body gt   lt  html gt    I ve tested this in IE6 and 7 and it seems to work fine

User · Answer

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

User · Answer

Try this   text-overflow  ellipsis   overflow  hidden   white-space nowrap

[html] Table cell widths - fixing width, wrapping/truncating long words

Examples related to html

Examples related to css

Examples related to user-interface

Examples related to html-table