Td Widths, Not Working? - Stack Overflow

Just browsing Stack Overflow? Help us improve your experience. Sign up for research

1. 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 td widths, not working? Ask Question Asked 12 years, 5 months ago Modified 1 year, 5 months ago Viewed 491k times 135

So I have this code here:

<table> <tr> <td width="200px" valign="top"> <div class="left_menu"> <div class="menu_item"> <a href="#">Home</a> </div> </div> </td> <td width="1000px" valign="top">Content</td> </tr> </table>

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?

• html
• css
• html-table
• width

Share Improve this question Follow edited Nov 10, 2016 at 12:26 Allan Pereira 2,57044 gold badges2222 silver badges2828 bronze badges asked Jun 18, 2012 at 20:27 user979331user979331 11.8k8282 gold badges248248 silver badges447447 bronze badges 1

• So how can we help when we have even less idea of what the complaint is about? We cannot even test the real page, and we have no information about the someone and his or her browsing environment. – Jukka K. Korpela Commented Jun 18, 2012 at 20:42

Add a comment |

15 Answers 15

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

It should be:

<td width="200">

or

<td style="width: 200px">

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.

Share Improve this answer Follow edited Jun 18, 2012 at 20:54 answered Jun 18, 2012 at 20:28 bfavarettobfavaretto 72.1k1818 gold badges116116 silver badges158158 bronze badges 7

• 65 should the table be <table style="table-layout:fixed;"> – user979331 Commented Jun 18, 2012 at 20:35
• 4 @user1193385, Yes, that's it. But avoid using inline css if possible. – bfavaretto Commented Jun 18, 2012 at 20:45
• 5 inline css is a bad idea unless you really only need it in one place. also, td width has been deprecated for some time. see answer below – kristina childs Commented Jun 18, 2012 at 20:46
• 2 @kristinachilds I agree. I used inline css on my example so I wouldn't need to split into two code blocks for HTML and CSS. Added a comment above telling the OP to avoid inline CSS. About the width attribute, technically it's not deprecated (since the HTML5 spec is still a working draft), but you are right it should be avoided. I'll edit my answer with a note about that. – bfavaretto Commented Jun 18, 2012 at 20:53
• The formal incorrectness of the syntax in the code in the question in this respect has no impact on functionality on any browser that I know it. Setting table-layout: fixed is relevant if you want rigid layout, but browsers may still deviate from the widths set. – Jukka K. Korpela Commented Jun 19, 2012 at 4:40

| Show 2 more comments 42 <table style="table-layout:fixed;">

This will force the styled width <td>. If the text overfills it, it will overlap the other <td> text. So try using media queries.

Share Improve this answer Follow answered Jul 28, 2016 at 15:08 mateostabiomateostabio 1,01899 silver badges1212 bronze badges 1

• 1 In my case (Firefox 70.0), table-layout:fixed assigned fixed widths to columns, so I cannot change width anymore (with jquery). – Jose Manuel Abarca Rodríguez Commented Oct 31, 2019 at 21:25

Add a comment | 39

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:

<table> <tr> <td valign="top"> <div class="left_menu"> <div class="menu_item"> <a href="#">Home</a> </div> </div> </td> <td valign="top" class="content">Content</td> </tr> </table>

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; } Share Improve this answer Follow edited Sep 28, 2015 at 17:32 Timothy Lee Russell 3,73811 gold badge3737 silver badges4545 bronze badges answered Jun 18, 2012 at 20:43 kristina childskristina childs 2,21011 gold badge2121 silver badges1919 bronze badges 3

• 13 Unfortunately, email technology is many years behind the current HTML spec, and in that case, tables and inline css are sadly, unavoidable. – User1000547 Commented Aug 13, 2013 at 14:29
• 2 No one was talking about html emails, this was for basic desktop web browsing. But yes, for emails tables and inline css are the only way to build them. Thanks, Microsoft... – kristina childs Commented Aug 13, 2013 at 21:00
• 5 I only bring up email because that's what brought me here; I was having this same issue with email. – User1000547 Commented Aug 13, 2013 at 21:13

Add a comment | 21

This problem is quite easily solved using min-width and max-width within a css rule.

HTML

<table> <tr> <td class="name">Peter</td> <td class="hobby">Photography</td> <td class="comment">A long comment about something...</td> </td> </table>

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

Share Improve this answer Follow edited Jul 25, 2020 at 8:36 answered Jul 25, 2020 at 8:30 SOKitsuneSOKitsune 33522 silver badges55 bronze badges Add a comment | 8

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/

Share Improve this answer Follow edited Nov 29, 2016 at 9:21 answered Nov 29, 2016 at 9:01 Cyan BaltazarCyan Baltazar 3,64211 gold badge1818 silver badges1111 bronze badges Add a comment | 8

You can use within <td> tag css : display:inline-block

Like: <td style="display:inline-block">

Share Improve this answer Follow edited Jul 21, 2018 at 9:54 Michał Turczyn 37.1k1717 gold badges5353 silver badges7979 bronze badges answered Jul 21, 2018 at 8:02 Siddharth ShuklaSiddharth Shukla 1,1211515 silver badges1414 bronze badges 2

• This is the only answer works for me, but I cannot explain. – Ron Commented Jan 11, 2022 at 2:57
• Are you trying to have <td> elements with different widths among the different rows? (e.g. in the first <tr>, you want the first <td> with width= 200px; in the second <tr>, you want the first <td> with width=400px). Using display: inline-block; effectively disregards the table behavior, which is why it might seem to solve the issue by allowing each cell to behave more like a block element aligned inline. However, this approach disrupts the semantic structure of the table and can lead to other layout issues. – J0ANMM Commented Sep 30 at 16:02

Add a comment | 7

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.

Share Improve this answer Follow answered Jun 18, 2012 at 20:29 lanzzlanzz 43.1k1111 gold badges9090 silver badges9898 bronze badges Add a comment | 3

try this:

word-break: break-all; Share Improve this answer Follow answered Nov 23, 2016 at 9:04 Masoud HBMasoud HB 7844 bronze badges Add a comment | 3

I use

<td nowrap="nowrap">

to prevent wrap Reference: https://www.w3schools.com/tags/att_td_nowrap.asp

Share Improve this answer Follow answered Jan 14, 2019 at 14:20 user1760527user1760527 1,16499 silver badges1414 bronze badges 1

• "The nowrap attribute of <td> is not supported in HTML5. Use CSS instead." – LowFieldTheory Commented Jun 10, 2019 at 11:11

Add a comment | 2

try to use

word-wrap: break-word;

hope this help

Share Improve this answer Follow answered Dec 30, 2012 at 17:39 medhatdawoudmedhatdawoud 1,18822 gold badges1313 silver badges1818 bronze badges 1

• This was helpful for me, but should be a comment on another answer, or added to an answer such as one of the top answers. – SendETHToThisAddress Commented Mar 6 at 23:28

Add a comment | 2

If using table-layout: fixed is not an option for you, I would suggest wrapping your cell content in a div and then apply your desired dimensions to it like:

<td> <div style="min-width: 200px; max-width: 600px; width: max-content;">Your long paragraph goes here...</div> </td>

In this approach td will fit to its child element (div) which is responsible for precisely keeping the dimensions.

Share Improve this answer Follow answered Jun 21, 2023 at 13:57 Mohsen TalebMohsen Taleb 1,02799 silver badges2020 bronze badges 1

• Also add word-wrap: break-word; – UdayanBKamble Commented Jun 28, 2023 at 7:56

Add a comment | 0

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

<table> <thead> <tr> <th>1</th> <th colspan="3">2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">2</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td colspan="2">3</td> </tr> </tbody> </table>

My CSS

table{ display: flex; flex-direction: column; } table tr{ display: flex; width: 100%; } table > thead > tr > th:first-child{ width: 20%; } table > thead > tr > th:last-child{ width: 80%; } table > tbody tr > td:first-child{ width: 10%; } table > tbody tr > td{ width: 30%; } table > tbody tr > td[colspan="2"]{ width: 60%; } table > tbody tr > td[colspan="3"]{ width: 90%; } /*This is to remove border making 1px space on right*/ table > tbody tr > td:last-child{ border-right: 0; } Share Improve this answer Follow answered Jan 20, 2020 at 12:00 Mohammed YousuffMohammed Yousuff 31611 gold badge33 silver badges1111 bronze badges Add a comment | 0

If you don't set the table to have table-layout: fixed and a certain width, then the table cells will stretch beyond their own width if content is wider. That's what he/she was complaining about.

Share Improve this answer Follow answered Apr 20, 2021 at 8:32 dorstadorsta 8111 silver badge66 bronze badges Add a comment | -1

Note that adjusting the width of a column in the thead will affect the whole table

<table> <thead> <tr width="25"> <th>Name</th> <th>Email</th> </tr> </thead> <tr> <td>Joe</td> <td>[email protected]</td> </tr> </table>

In my case, the width on the thead > tr was overriding the width on table > tr > td directly.

Share Improve this answer Follow answered Mar 28, 2014 at 5:44 Nick WoodhamsNick Woodhams 12.6k1010 gold badges5555 silver badges5252 bronze badges Add a comment | -2

Use

<table style="table-layout:fixed;">

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

Share Improve this answer Follow answered Dec 3, 2019 at 13:24 Amrit AnandAmrit Anand 1511 silver badge33 bronze badges 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
• html-table
• width

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!

Linked

352 Setting table column width 13 TD column width value not working with fixed table-layout 15 CSS :hover not working on iOS Safari and Chrome 0 Why is width on td element not working with table-layout fixed? 0 Use a span for showing the elipses instead of div -7 How to increase the width of table cell using css?

Related

0 Table and td width issue 14 Why TD width is not working or not followed? 1 TD width not changing CSS HTML 36 HTML table width not working 0 setting td's width isn't working in this table 1 HTML/CSS: Tables: width not working 0 <td> width not working in my table 3 Table TD width not working 1 Can't change the width of table <TD> 1 Table td width not getting picked up

Hot Network Questions

• How to identify unsafe trees for climbing stand?
• Sequence with diagonal lines and circles
• p column type stops compilation in RevTeX
• Replacement chain looks different from factory chain
• How does Trump plan to counteract the predicted negative effects of tariffs?
• What's the Purpose of the IRQ on a 6502
• Why is a pure copper cathode necessary in the electrolytic refining of copper?
• Align TikZ pictures horizontally
• What's a good way to append a nonce to ciphertext in Python for AES GCM in Python?
• Should I ask for physical recommendation letters now to avoid future issues with professors' availability?
• How to find file names but only with grep .html OR .php?
• Why does Jesus tell the Jews to follow the Pharisees teaching while elsewhere He speaks of them creating unnecessary rules?
• A fantasy story with an imp in a box that paints pictures
• Reducing wattage of a portable car heater
• Hearing the cry of a baby - abandoning practice for action?
• I am the owner of an image. I published it in Unsplash. Am I allowed to upload that same image to other sites?
• Does length contraction "break the speed limit"?
• Find the Smallest Data Type for a Number
• Can you see through a cannonball packing?
• The product of the alternating lengths of a hexagon whose vertices belong to an ellipse
• Is Holy Terra Earth?
• Is fallibilism circular?
• Sub panel location question
• Walks in Nice (Nizza)

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