Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is my HTML table not respecting my CSS column width?

I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:

td.longColumn {       width: 300px; } 

and here is a simplified version of my table

<table>   <tr>    <td class='longColumn'></td>    <td class='longColumn'></td>    <td class='longColumn'></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    [ . . and a bunch more columns . . .]   </tr> </table> 

For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).

The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.

Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:

#main {     margin: 22px 0 0 0;     padding: 30px 30px 15px 30px;     border: solid 1px #AAAAAA;     background-color: #fff;     margin-bottom: 30px;     margin-left: 10px;     _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */     float: left;     /*width: 1020px;*/     min-width:1020px;     display: block;     overflow: visible;     z-index: 0; } 
like image 695
leora Avatar asked Apr 14 '11 22:04

leora


People also ask

How do you fix a column width in a HTML table?

The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.

How do I fix the width and height of a table in HTML?

To manipulate the height or width of an entire table, place the size attribute (either "WIDTH=" or "HEIGHT=") within the <TABLE> code. To manipulate individual cells, place the size attribute within the code for that cell.

How do I stop a table overflow in HTML?

The trick is to use the CSS property table-layout. It can take three values: auto , fixed , and inherit . The normal (initial) value is auto , which means that the table width is given by its columns and any borders. In other words, it expands if necessary.


2 Answers

You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.

like image 161
aphax Avatar answered Sep 23 '22 06:09

aphax


Giving it both max-width and min-width attributes should work.

like image 21
umesh Avatar answered Sep 23 '22 06:09

umesh