title: Bootstrap 4 Table How to make column widths even?
body: <p>I am going to build a table based on some data dynamically. Some columns and rows will be added by jquery later but Before i write the js code i want to see the table as draft to be sure everything is ok. So i put some dummy columns and rows to check how everything works. Right now i am seeing some columns have equal width and some are smaller. I want to make all columns are equal.</p>
  <p>Here is my html code: Bootstrap 4.3.1 is used.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
      &lt;html&gt;
      &lt;head&gt; 
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="card-body"&gt;
              &lt;div class="table-responsive"&gt;
                  &lt;table class="table  table-responsive table-bordered" id="tblOfferPrepItems"&gt;
                      &lt;thead class="thead-light"&gt;
                          &lt;tr&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Profil&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Ürün/Hizmet&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;İşTipi&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Açıklama&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 1 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 2 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 3 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 4 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 5 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 6 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Yıl 7 Adam/Gün&lt;/th&gt;
                              &lt;th scope="col" style="color:#808080"&gt;Toplam Adam Gün&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="tblOfferPrepItemsBody"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;input type="text" data-id="" data-name="" id="txtProductLookup" class="form-control" readonly&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="text" data-id="" data-name="" id="txtProductServiceLookup" class="form-control" readonly&gt;
                              &lt;/td&gt;
      
                              &lt;td&gt;
                                  &lt;input type="number" id="txtProductType" class="form-control" readonly&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;textarea class="form-control" id="txtDescription" rows="4"&gt;&lt;/textarea&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearCode"&gt;
                                  &lt;input type="number" id="txtYearCode" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort1"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort2"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort3"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort4"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort5"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort6"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td id="tdYearEffort7"&gt;
                                  &lt;input type="number" id="txtYearEffort" class="form-control"&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="number" id="txtTotalEffort" class="form-control"&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card-footer" style="margin-top: 5px;"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col" style="margin: auto; text-align: center;"&gt;
                      &lt;button type="button" class="btn btn-secondary" id="btnCreate"&gt;
                          Oluştur
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="col" style="margin: auto; text-align: center;"&gt;
                      &lt;button type="button" class="btn btn-secondary" id="btnCancel" data-toggle="modal" data-target="#cancelModal"&gt;
                          İptal
                      &lt;/button&gt;
                      &lt;div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true"&gt;
                          &lt;div class="modal-dialog" role="document"&gt;
                              &lt;div class="modal-content"&gt;
                                  &lt;div class="modal-header"&gt;
                                      &lt;h5 class="modal-title" id="cancelModalLabel"&gt;Modal title&lt;/h5&gt;
                                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;div class="modal-body"&gt;
                                      Yapmış olduğunuz tüm seçimleri iptal edip sayfayı kapatmaya emin misiniz?
                                  &lt;/div&gt;
                                  &lt;div class="modal-footer"&gt;
                                      &lt;button type="button" id="btnCancelConfirm" class="btn btn-primary"&gt;Evet&lt;/button&gt;
                                      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Hayır&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>