Home > DeveloperSection > Forums > Table column fixed width
Takeshi Okada
Takeshi Okada

Total Post:89

Points:629
Posted on    April-04-2013 2:14 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 2 Reply(s)
 1123  View(s)
Rate this:
Hi Everyone!

I'm having problems with setting a fixed width for table columns. Have a look at jsfiddle example:

http://jsfiddle.net/Stylock/jJ6DK/

The middle column should be 300px wide, and the left column should be 80px wide, but for some reason all three columns are the same width. Anyone knows how 

to fix that?

Thanks in advance!


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    April-04-2013 7:18 AM

Hi Takeshi!

Remove this css style of your table and it should work:

table-layout: fixed;

When you set table-layout: fixed for you table it will take these algorithms:

The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
Allows a browser to lay out the table faster than the automatic table layout
The browser can begin to display the table once the first row has been received

Vijay Shukla

Total Post:100

Points:700
Posted on    April-04-2013 7:26 AM

Hi Takesh!

Remove table-layout: fixed from table:

table {
    border: 1px solid #D7E4B9;
    background: #B4CDCD; 
}

Don't want to miss updates? Please click the below button!

Follow MindStick