title: Table column sizing
body: <p>In <code>Bootstrap 3</code>,  I could apply <code>col-sm-xx</code> to the <code>th</code> tags in the <code>thead</code> and resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in bootstrap 4?</p>
  
  <pre><code>&lt;thead&gt;
  &lt;th class="col-sm-3"&gt;3 columns wide&lt;/th&gt;
  &lt;th class="col-sm-5"&gt;5 columns wide&lt;/th&gt;
  &lt;th class="col-sm-4"&gt;4 columns wide&lt;/th&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p>Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs:</p>
  
  <pre><code>&lt;div class="container" style="border: 1px solid black;"&gt;
      &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
          &lt;tr class="row"&gt;
              &lt;th class="col-sm-3"&gt;3 columns wide&lt;/th&gt;
              &lt;th class="col-sm-5"&gt;5 columns wide&lt;/th&gt;
              &lt;th class="col-sm-4"&gt;4 columns wide&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;123&lt;/td&gt;
              &lt;td&gt;456&lt;/td&gt;
              &lt;td&gt;789&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>