Table columns are sequeezed

[SameerMughal]

Hi all,

I am not very good web designer but I am trying to show the information retrieved from the database using table. The idea is that one record should be shown in one row/line.

My code works fine untill the table reaches the max screen space then isted of showing the horizontal scroll bar the page start sequeezing the table columns which kills the display.

1. frame scroling is set "auto"
2. Horizontal scrolling tested.

Is there a way to set the column width to auto ?
Can any one please tell me how to do this?

Thanks,

Sameer.

[almostbob]

If you dont set colum widths or table width at all, each column will be as wide as the largest data it contains, and the table will be as wide as the sum of the columns, creating scroll bars

[SameerMughal]

If you dont set colum widths or table width at all, each column will be as wide as the largest data it contains, and the table will be as wide as the sum of the columns, creating scroll bars

Hi there,

Thanks for the reply. I havn't actually set width for column or table just using this internal CSS.

<style type="text/css">


/* <![CDATA[ */


table, td{   
 border-width: 1px; 
   }



table{    border-width: 1px;
    border-spacing: 4px;    
border-collapse: collapse;
border-style: solid;
border-color: FFCC00;
overflow-x: auto;
margin:auto;
}

tr{
border-style: solid;
border-width: 1px; border-color: white;}

td{    margin: 10; 
   padding: 4px;  

border-spacing:4px; 
   }

</style>

Dont understand why it seqeez to fit the screen insted of scrolling. I have tested and static line which beyond the screen size and enables horizontal scrolling.

Can you think any other reason?
It will be great if I could get it working.

Regards,

Sameer.

[almostbob]

Try

table{ border: 1px solid #ffcc00 collapse;
border-spacing: 4px;
overflow-x: scroll;
margin:auto;
}
tr{ border: solid 1px white; }
td{ border-width: 1px;
margin: 10px;
padding: 4px;
border-spacing:4px;
}

?

http://www.w3.org/TR/css3-box/#overflow1