title: Width for table columns will not set
body: <p>If you look at all of my <code>&lt;th&gt;</code> tags in the <code>&lt;thead&gt;</code> tag in the table, you can see if each <code>&lt;th&gt;</code> has its own class: col1, col2, col3 and col4.</p>
  
  <p>I am trying to set a max and min width for each of those classes, the problem is that it is not setting the width at all. If set the width using percentage then it doesn't work, but it does work using px, but I want to use percentage, so why is it not setting the width?</p>
  
  <p>Below is table code:</p>
  
  <pre><code>&lt;div id="tableWrapper"&gt;
    &lt;div id="tableScroll"&gt;
      &lt;table id="qandatbl" align="center"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th class="col2"&gt;Question No&lt;/th&gt;
            &lt;th class="col4"&gt;Question&lt;/th&gt;
            &lt;th class="col2"&gt;Option Type&lt;/th&gt;
            &lt;th class="col1"&gt;Duration&lt;/th&gt;
            &lt;th class="col2"&gt;Weight(%)&lt;/th&gt;
            &lt;th class="col1"&gt;Answer&lt;/th&gt;
            &lt;th class="col3"&gt;Video&lt;/th&gt;
            &lt;th class="col4"&gt;Audio&lt;/th&gt;
            &lt;th class="col3"&gt;Image&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt; 
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is css;</p>
  
  <pre><code>#qandatbl{
    font-size:14px;
    border-collapse:collapse;
    text-align:center;
    margin-left:auto; 
    margin-right:auto;
  }
  .col1{
    background-color:#FCF6CF; 
    max-width:7%;
    min-width:7%; 
    border: 1px solid black;
  }
  .col2{
    background-color:#FEFEF2;
    max-width:7%;
    min-width:7%;
    border: 1px solid black;  
  }   
  .col3{
    background-color:#FEFEF2; 
    max-width:16%;
    min-width:16%;    
    border: 1px solid black;
  }
  .col4{
    background-color:#FCF6CF;
    max-width:16%;
    min-width:16%;    
    border: 1px solid black;
  }
  #tableWrapper {
    position:relative;
  }
  #tableScroll {
    height:300px;
    overflow:auto;  
    margin-top:20px;
  }
  #tableWrapper thead tr {
    position:absolute;
    top:-24px;
  }
  </code></pre>