title: keep column width using responsive table bootstrap3
body: <p>I have a table with 7 columns (td). I'm setting a fixed width and it's working perfectly using a browser on desktop. However, When I resize my browser to simulate a mobile phone or even accessing this page through a mobile device, it won't respect column width.</p>
  
  <p>I won't put the entire html, but it's basically:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table&gt;
           &lt;tr&gt;
                &lt;td class="w-large"&gt;Column 1&lt;/td&gt;
                &lt;td class="w-medium"&gt;Column 2&lt;/td&gt;
                &lt;td class="w-medium"&gt;Column 3&lt;/td&gt;
                &lt;td class="w-medium"&gt;Column 4&lt;/td&gt;
                &lt;td class="w-medium"&gt;Column 5&lt;/td&gt;
                &lt;td class="w-medium"&gt;Column 6&lt;/td&gt;
                &lt;td class="w-medium"&gt;Column 7&lt;/td&gt;
           &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.w-large {
      width: 198px;
  }
  
  .w-medium {
      width: 176px;
  }
  </code></pre>
  
  <p>Is there a way to keep column width on mobile? Does bootstrap have a special class to do this similar to table-responsive?</p>