title: How to get fixed table columns width
body: <p>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?</p>
  
  <p><code>&lt;col&gt;</code> tag is only good for firefox</p>
  
  <p><code>table-layout:fixed</code> is for whole table really</p>
  
  <p>Just setting a <code>width</code> does not do it</p>
  
  <p>what is the best css property to use for this</p>
  
  <p>Below is code:</p>
  
  <pre><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;
                  }
  
    &lt;table border=1 id="vidtbl"&gt;
      &lt;tr&gt;
      &lt;th&gt;Question No&lt;/th&gt;
      &lt;th&gt;Video&lt;/th&gt;
      &lt;th&gt;Audio&lt;/th&gt;
      &lt;th&gt;Image&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td class="qid2"&gt;&lt;/td&gt;
      &lt;td class="video"&gt;images/dolphinvideo.png//////////////////////////////////////&lt;/td&gt;
      &lt;td class="audio"&gt;hello&lt;/td&gt;
      &lt;td class="image"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>