How to get the width of columns of a fixed table

Question

How do you make individual table columns fixed for a specific width, no matter how much text in that column, the column width remains the same?

Tag

<col> is good only for firefox

table-layout:fixed valid for the entire table

Just setting a width doesn't do it

What is the best css property to use for this

Below is the code:

  .video{ overflow:hidden; table-layout:fixed; max-width:146px; } .audio{ overflow:hidden; table-layout:fixed; max-width:146px; } .image{ overflow:hidden; table-layout:fixed; max-width:146px; } .qid2{ overflow:hidden; table-layout:fixed; max-width:92px; } <table border=1 id="vidtbl"> <tr> <th>Question No</th> <th>Video</th> <th>Audio</th> <th>Image</th> </tr> <tr> <td class="qid2"></td> <td class="video">images/dolphinvideo.png//////////////////////////////////////</td> <td class="audio">hello</td> <td class="image"></td> </tr> </table> 

Answer 1

try using

 max-width:100px; 

or

 max-height:100px; 

This will allow your column to maximize to the width you set.

Answer 2

You can wrap the contents of <td> in another tag with width and overflow: hidden. For instance:

 <table> <tr> <td class="fifty"> <p>Lorem ipsum dolor</p> </td> </td> </table> 

And CSS:

 .fifty p { overflow:hidden; width:50px; } 

Answer 3

You can use width attribute in td tag

 <td width="100px"> 

or you can use the style attribute

 <td style="width:100px"> 

or you can define it in css file

 .tdstyle{ width:100px; } 

and specify the class in the td tag

 <td class="tdstyle"> 

Answer 4

If setting td width to fix does not work for you:

 <td width="100">..</td> or <td style="width:100px">...</td> 

Wrapped the contents in a div and set the overflow as hidden:

 <td><div style="width:100px;overflow:hidden;">...</div></td> 

The Css class will be very efficient and easy to maintain:

 .col120 { width:120px; overflow:hidden;} <td><div class="col120">content...</div></td>