title: Using same width for viewport when vertical scrollbar is appearing and when the scrollbar is not appearing
body: <p>I have the below bootstrap tabs, here the 'Active' tab contents are less than the view port and the 'pending review' tab contents are more than the view port so the vertical scrollbar is appearing. Here my problem is when i switch over the tabs, i see a jerk.Because the vertical scrollbar is not appearing on the first tab since its contents are less than the view port and it is occupying the scrollbar space. i wanted to prevent this jerk but i couldn't prevent. is this possible having the same width when scrollbar is appearing and when the scrollbar is not appearing?</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-css lang-css prettyprint-override"><code>.manage-rfq-row-one {
    margin-top: 1.786rem;
  }
  
   1. 
  
  .manage-rfq-title&gt;h1 {
    margin: 0;
    font-size: 2.429rem;
    font-family: "Montserrat";
    color: #393E41;
  }
  
  .manage-rfq-menu {
    margin: 2.5rem 0 0.7143rem;
    border-bottom: 2px solid #ddd;
  }
  
  .manage-rfq-menu&gt;li&gt;a {
    font-size: 1rem;
    font-family: "Montserrat";
    color: #383D40;
    padding: 10px 30px;
    border: 2px solid transparent;
  }
  
  .manage-rfq-menu&gt;li:first-child&gt;a {
    /*padding-left: 0px;*/
  }
  
  .manage-rfq-menu&gt;li&gt;a span {
    background-color: #C7CACC;
  }
  
  .manage-rfq-menu&gt;li.active&gt;a span {
    background-color: #ffcc29;
  }
  
  .manage-rfq-menu&gt;li&gt;a span .notification-count {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  }
  
  .manage-rfq-menu&gt;li.active&gt;a,
  .manage-rfq-menu&gt;li.active&gt;a:focus,
  .manage-rfq-menu&gt;li.active&gt;a:hover {
    color: #000;
    background-color: #fff;
    border: 2px solid #ddd;
    border-bottom-color: transparent;
  }
  
  .manage-rfq-menu&gt;li {
    margin-bottom: -2px;
  }
  
  .manage-rfq-menu&gt;li&gt;a:hover {
    background-color: transparent;
    border-color: transparent;
  }
  
  .manage-rfq-tbl {
    border: 1px solid #ccc;
    margin-bottom: 5px;
  }
  
  .manage-rfq-tbl&gt;thead&gt;tr&gt;th {
    color: #7C7D7E;
    font-size: 0.85rem;
  }
  
  .manage-rfq-tbl&gt;thead&gt;tr&gt;th:first-child {
    padding-left: 1.786rem;
  }
  
  .manage-rfq-tbl&gt;tbody&gt;tr&gt;td {
    font-size: 1.071rem;
    font-family: 'montserrat';
    vertical-align: middle;
  }
  
  .manage-product-notification {
    min-width: 20px;
    min-height: 20px;
    position: relative;
    display: inline-block;
    color: #65686A;
    font-family: 'Lato';
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.7143rem;
    vertical-align: bottom;
  }
  
  .manage-rfq-tbl&gt;tbody&gt;tr&gt;td.mnage-prduct-title {
    width: 26%;
    padding-left: 1.786rem;
    padding-top: 1.429rem;
    padding-bottom: 1.429rem;
  }
  
  .mnage-prduct-img-wrap,
  .posted-on-rfq {
    width: 26%;
  }
  
  .expiry-date {
    width: 19%;
  }
  
  .mnage-ur-prducts {
    width: 29%;
  }
  
  .mnage-prduct-img {
    width: 10.14rem;
    height: 10.14rem;
    padding-top: 1.571rem;
    padding-bottom: 1.571rem;
  }
  
  .mnage-prduct-img&gt;img {
    width: 10.14rem;
    height: 10.14rem;
    border: 1px solid #ccc;
  }
  
  .manage-rfq-tbl&gt;tbody&gt;tr&gt;td.mnage-ur-prducts i {
    color: #B8C0C5;
    padding-right: 0.3571rem;
  }
  
  .manage-rfq-tbl&gt;tbody&gt;tr&gt;td.mnage-ur-prducts a {
    padding-right: 2.143rem;
  }
  
  [data-ttip] {
    position: relative;
  }
  
  [data-ttip]:hover:before {
    content: attr(data-ttip);
    position: absolute;
    margin: 0;
    bottom: 28px;
    left: -6.143rem;
    min-width: 16.29rem;
    background-color: #F7FBFC;
    font-size: 0.9286rem;
    font-family: "Montserrat";
    color: #6B6E70;
    padding: 10px;
    border-radius: 2px;
  }
  
  .mnage-prduct-resume&gt;a[data-ttip]:hover:before {
    left: -4.143rem;
  }
  
  [data-ttip]:hover:after {
    content: '';
    position: absolute;
    border-top: 11px solid #F7FBFC;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    bottom: 18px;
    left: 10px;
  }
  
  .mnage-prduct-resume&gt;a[data-ttip]:hover:after {
    left: 40px;
  }
  
  .mnage-ur-prducts i {
    color: #686868 !important;
  }
  
  .mnage-rfq-search-box {
    margin-top: 0.2857rem;
    width: 15.86rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://use.fontawesome.com/aacdcb9275.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="row manage-rfq-row-two"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;ul class="nav nav-tabs manage-rfq-menu"&gt;
        &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;ACTIVE &lt;span class="manage-product-notification"&gt;&lt;span class="notification-count"&gt;7&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;PENDING REVIEW &lt;span class="manage-product-notification"&gt;&lt;span class="notification-count"&gt;77&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="pointer"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tab-content"&gt;
        &lt;div id="home" class="tab-pane fade in active"&gt;
          &lt;table class="table manage-rfq-tbl"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;TITLE&lt;/th&gt;
                &lt;th&gt;POSTED / EDITED ON&lt;/th&gt;
                &lt;th&gt;EXPIRY&lt;/th&gt;
                &lt;th&gt;ACTION&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;div id="menu1" class="tab-pane fade"&gt;
          &lt;table class="table manage-rfq-tbl"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;TITLE&lt;/th&gt;
                &lt;th&gt;POSTED / EDITED ON&lt;/th&gt;
                &lt;th&gt;EXPIRY&lt;/th&gt;
                &lt;th&gt;ACTION&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Apr 1, 2019&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;!-- &lt;span class="mnage-prduct-pause"&gt;&lt;i class="fa fa-pause-circle-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link" data-ttip="Click to stop showing this product on your company profile."&gt;Pause&lt;/a&gt;&lt;/span&gt;
                            &lt;span class="mnage-prduct-resume"&gt;&lt;i class="fa fa-play-circle-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link" data-ttip="Click to again start displaying this product on your company profile."&gt;Resume Display&lt;/a&gt;&lt;/span&gt; --&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Kraft Paper Rolls&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Feb 2, 2016&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 7, 2019&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;!-- &lt;span class="mnage-prduct-pause"&gt;&lt;i class="fa fa-pause-circle-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link" data-ttip="Click to stop showing this product on your company profile."&gt;Pause&lt;/a&gt;&lt;/span&gt;
                            &lt;span class="mnage-prduct-resume"&gt;&lt;i class="fa fa-play-circle-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link" data-ttip="Click to again start displaying this product on your company profile."&gt;Resume Display&lt;/a&gt;&lt;/span&gt; --&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 27, 2018&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 27, 2018&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 27, 2018&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 27, 2018&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 27, 2018&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="mnage-prduct-title"&gt;Paper Machine&lt;/td&gt;
                &lt;td class="posted-on-rfq"&gt;Mar 27, 2017&lt;/td&gt;
                &lt;td class="expiry-date"&gt;Mar 27, 2018&lt;/td&gt;
                &lt;td class="mnage-ur-prducts"&gt;
                  &lt;span class="mnage-prduct-edit"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Edit&lt;/a&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt; &lt;a href="#" class="link"&gt;Delete&lt;/a&gt;&lt;/ABBR&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>