title: Increase column width for Bootstrap 4 table
body: <p>I need to increase column width, i tried width-%,PX,rem but that's not working.
  I can able to increase the column width if the table have small number of columns but in my scenario if i have more than 15 columns i cant change the width.</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
  &lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
  
  &lt;th scope="col"&gt;#&lt;/th&gt;&lt;th scope="col"&gt;#&lt;/th&gt;
  
        &lt;th scope="col" style="width: 500px;"&gt;Heading heading'&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
  
        &lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
  
   &lt;th scope="row"&gt;1&lt;/th&gt;&lt;th scope="row"&gt;1&lt;/th&gt;
  
        &lt;td style="width: 300px;"&gt;jksdfn jhs fjidsh fj id hidsfdsfd&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
      &lt;/tr&gt;
     &lt;tr&gt;
  
   &lt;th scope="row"&gt;1&lt;/th&gt;&lt;th scope="row"&gt;1&lt;/th&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
  
        &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>I need to increase the third column in the table below, attached image for referene.
  <a href="https://i.stack.imgur.com/93ftS.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/93ftS.jpg" alt="enter image description here"></a>
  I've used <a href="https://getbootstrap.com/docs/4.0/content/tables/" rel="noreferrer">Always Responsive Bootstrap 4 Table</a> </p>