Google Chrome - <td style="width: 150px;"> collapse

Take a look at my problem table in Firefox (image 1), IE (image 2), and Chrome (image 3).  The <td> inline style works fine with Firefox and IE, but doesn't hold up with Chrome.  

I've posted a sample on my development server: http://031c5d3.netsolhost.com/ChromeIssue/ReportPage.html 

The sample is simply a sample.  The ASP.NET and JavaScript are non-functional, but the column collapses with Chrome, just as it does on my production server.

Here's what I've tried to fix the issue:
1. I've added width to the DIV containing the table.  It didn't help.
2. I've tried changing style="width:150px;" to width="150".  It didn't help.
3. I've tried assigning style="width:150px; to all the <td> elements that should have a width of 150px.  It didn't help.
Image-1.png
Image-2.png
Image-3.png
jdanaAsked:
Who is Participating?
 
Lukasz ChmielewskiConnect With a Mentor Commented:
This should be done with setting fixed size for the table
in fact 460 :),
table style="width: 460px;"
0
 
imantasConnect With a Mentor Commented:
Even if you define a width for a table cell, browser still can resize it in a way it wants to :) Please find some material to read about layout of a table-cell.

Possible solutions:

insert a DIV with fixed width in some/all of the rows, ie <td style="width: 150px;"> <div style="width: 150px">Name</div> </td>
Define the width for the table:
<table style="width: 450px" ...>...
0
 
andrewkhanCommented:
Doesn't seem to be collapsing on my chrome. (1920x1080)
0
 
jdanaAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.