td widths not working

Question

So I have this code here    lt table gt       lt tr gt           lt td width  200px  valign  top  gt               lt div class  left menu  gt                   lt div class  menu item  gt                       lt a href     gt Home lt  a gt                   lt  div gt               lt  div gt           lt  td gt           lt td width  1000px  valign  top  gt Content lt  td gt       lt  tr gt   lt  table gt    with the CSS   left menu       background  none repeat scroll 0 0  333333      border-radius  5px 5px 5px 5px      font-family  Arial Helvetica sans-serif      font-size  12px      font-weight  bold      padding  5px      menu item       background  none repeat scroll 0 0  CCCCCC      border-bottom  1px solid  999999      border-radius  5px 5px 5px 5px      border-top  1px solid  FFFFCC      cursor  pointer      padding  5px      It works fine on my browser and I have tested it in every browser both mac and PC  but someone is complaining that the td with the width of 200 keeps changing width  I have no idea what he is talking about  Does anyone know why he or she is seeing the width change on the td

User · Answer

lt table style  table-layout fixed   gt    This will force the styled width  lt td gt   If the text overfills it  it will overlap the other  lt td gt  text  So try using media queries

User · Answer

I tried with many solutions but it didn t work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property  This was my HTML requirement   lt table gt     lt thead gt       lt tr gt         lt th gt 1 lt  th gt         lt th colspan  3  gt 2 lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt 1 lt  td gt         lt td colspan  3  gt 2 lt  td gt       lt  tr gt       lt tr gt         lt td gt 1 lt  td gt         lt td gt 2 lt  td gt         lt td gt 3 lt  td gt         lt td gt 4 lt  td gt       lt  tr gt       lt tr gt         lt td gt 1 lt  td gt         lt td gt 2 lt  td gt         lt td colspan  2  gt 3 lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    My CSS  table      display  flex    flex-direction  column    table tr      display  flex    width  100     table  gt  thead  gt  tr  gt  th first-child      width  20     table  gt  thead  gt  tr  gt  th last-child      width  80     table  gt  tbody tr  gt  td first-child      width  10     table  gt  tbody tr  gt  td      width  30     table  gt  tbody tr  gt  td colspan  2        width  60     table  gt  tbody tr  gt  td colspan  3        width  90       This is to remove border making 1px space on right   table  gt  tbody tr  gt  td last-child      border-right  0

User · Answer

try to use  word-wrap  break-word    hope this help

User · Answer

This problem is quite easily solved using min-width and max-width within a css rule  HTML  lt table gt     lt tr gt       lt td class  quot name quot  gt Peter lt  td gt       lt td class  quot hobby quot  gt Photography lt  td gt       lt td class  quot comment quot  gt A long comment about something    lt  td gt     lt  td gt   lt  table gt   CSS  name     max-width  80px    min-width  80px     This will force the first column to be 80px wide  Usually I only use max-width without min-width to reign in text that is very occasionally too long from creating a table that has a super wide column that is mostly empty  The OP s question was about setting to a fixed width though  hence both rules together  On many browsers width 80px  in CSS is ignored for table columns  Setting the width within the HTML does work  but is not the way you should do things  I would recommend using min and max width rules  and not set them the same but rather set a range  This way the table can do it s thing  but you can give it some hints on what to do with overly long content  If I want to keep the text from wrapping and increasing the height of a row - but still make it possible for a user to see the full text  I use white-space  nowrap  on the main rule  then apply a hover rule that removes the width and nowrap rules so that the user can see the full content when they over their mouse over it  Something like this  CSS  name     max-width  80px    white-space  nowrap    overflow  hidden     name hover     max-width  none    white-space  normal    overflow auto     It just depends on exactly what you are trying to achieve  I hope this helps someone  PS As an aside  for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome

User · Answer

It should be    lt td width  200  gt    or   lt td style  width  200px  gt    Note that if your cell contains some content that doesn t fit into the 200px  like somelongwordwithoutanyspaces   the cell will stretch nevertheless  unless your CSS contains table-layout  fixed for the table   EDIT  As kristina childs noted on her answer  you should avoid both the width attribute and using inline CSS  with the style attribute   It s a good practice to separate style and structure as much as possible

User · Answer

You can use within  lt td gt  tag css   display inline-block  Like   lt td style  display inline-block  gt

User · Answer

Use   lt table style  table-layout fixed   gt    It will force table to set to 100  width Then use this code      dataTable   dataTable            bAutoWidth  false           aoColumns                 sWidth   45                  sWidth   45                  sWidth   10                                   table id is dataTable and having 3 column   to specify length to each cell

User · Answer

I use    x000D   x000D   lt td nowrap  nowrap  gt  x000D   x000D   x000D    to prevent wrap Reference  https   www w3schools com tags att td nowrap asp

User · Answer

try this   word-break  break-all

User · Answer

You can t specify units in width height attributes of a table  these are always in pixels  but you should not use them at all since they are deprecated

User · Answer

Width and or height in tables are not standard anymore  as Ianzz says  they are deprecated  Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size    lt table gt       lt tr gt           lt td valign  top  gt               lt div class  left menu  gt                   lt div class  menu item  gt                       lt a href     gt Home lt  a gt                   lt  div gt               lt  div gt           lt  td gt           lt td valign  top  class  content  gt Content lt  td gt       lt  tr gt   lt  table gt    CSS   content       width  1000px      left menu       background  none repeat scroll 0 0  333333      border-radius  5px 5px 5px 5px      font-family  Arial Helvetica sans-serif      font-size  12px      font-weight  bold      padding  5px      width  200px      menu item       background  none repeat scroll 0 0  CCCCCC      border-bottom  1px solid  999999      border-radius  5px 5px 5px 5px      border-top  1px solid  FFFFCC      cursor  pointer      padding  5px

User · Answer

Note that adjusting the width of a column in the thead will affect the whole table   lt table gt       lt thead gt           lt tr width  25  gt               lt th gt Name lt  th gt               lt th gt Email lt  th gt           lt  tr gt       lt  thead gt       lt tr gt           lt td gt Joe lt  td gt           lt td gt joe email com lt  td gt       lt  tr gt   lt  table gt    In my case  the width on the thead   tr was overriding the width on table   tr   td directly

User · Answer

You can try the  table-layout  fixed   to your table  table-layout  fixed  width  150px    150px or your desired width   Reference  https   css-tricks com fixing-tables-long-strings

[html] td widths, not working?

Examples related to html

Examples related to css

Examples related to html-table

Examples related to width