Question

How do you make individual table columns fixed for a certain width so no matter how much text is in that column, the width of the column stays the same?

<col> tag is only good for firefox

table-layout:fixed is for whole table really

Just setting a width does not do it

what is the best css property to use for this

Below is 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 let your column expand maximum upto the width you set.