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 ?

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 Jun 18 '12 at 20:42

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.

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.

https://stackoverflow.com/questions/11090544/td-widths-not-working/11090559#11090559 share improve this answer inline css is a bad idea unless you really only need it in one place. also, td width has been depreciated for some time. see answer below – kristina childs Jun 18 '12 at 20:46 @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 Jun 18 '12 at 20:53

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>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
        <td valign="top" class="content">Content</td>
</table>
.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;
                Unfortunately, email technology is many years behind the current HTML spec, and in that case, tables and inline css are sadly, unavoidable.
                    – MikeTheLiar
                Aug 13 '13 at 14:29
                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
                Aug 13 '13 at 21:00
                I only bring up email because that's what brought me here; I was having this same issue with email.
                    – MikeTheLiar
                Aug 13 '13 at 21:13
                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
                Oct 31 at 21:25
                "The nowrap attribute of <td> is not supported in HTML5. Use CSS instead."
                    – LowFieldTheory
                Jun 10 at 11:11