title: Full width tabs using Bootstrap (Support IE)
body: <p>I'm trying to adjust Bootstrap tabs to make them span the full width of their container. Here's my code (a minimal working example):</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Full Width Tabs using Bootstrap&lt;/title&gt;
          &lt;link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"&gt;
          &lt;style&gt;
              .full-width-tabs &gt; ul.nav.nav-tabs {
                  display: table;
                  width: 100%;
                  table-layout: fixed; /* To make all "columns" equal width regardless of content */
              }
              .full-width-tabs &gt; ul.nav.nav-tabs &gt; li {
                  float: none;
                  display: table-cell;
              }
              .full-width-tabs &gt; ul.nav.nav-tabs &gt; li &gt; a {
                  text-align: center;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="tabbable full-width-tabs"&gt;
              &lt;ul class="nav nav-tabs"&gt;
                  &lt;li class="active"&gt;&lt;a href="#tab-one" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tab-two" data-toggle="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="tab-content"&gt;
                  &lt;div class="tab-pane active" id="tab-one"&gt;
                      I'm in Tab 1.
                  &lt;/div&gt;
                  &lt;div class="tab-pane" id="tab-two"&gt;
                      Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                  &lt;/div&gt;  
              &lt;/div&gt; 
          &lt;/div&gt; &lt;!-- /tabbable --&gt;
  
          &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get this (undesired) result:</p>
  
  <p><img src="https://i.stack.imgur.com/0B0DL.png" alt="Undesired tabs"></p>
  
  <p>However, I want the tab "headers" to span the entire width of the tab container - and distribute their individual width's evenly, something like this <em>desired</em> result:</p>
  
  <p><img src="https://i.stack.imgur.com/qeXn0.png" alt="desired tabs"></p>
  
  <p>How do I achieve that?</p>
  
  <p><strong>Update 1:</strong> Here's a JSFiddle: <a href="http://jsfiddle.net/agib/FZy4n/" rel="noreferrer">http://jsfiddle.net/agib/FZy4n/</a></p>
  
  <p><strong>Update 2:</strong> I already had a working widget using custom javascript. However, I'm looking for a solution that integrates seemlessly with Bootstrap and thus relies only on standard Bootstrap javascript.</p>
  
  <p><strong>Update 3:</strong> If I remove / comment out</p>
  
  <pre><code> /* table-layout: fixed; */
  </code></pre>
  
  <p>header widths are taking up all horizontal space as needed. However, their widths are resulting from the length of the header texts and thus not distributed evenly.</p>
  
  <p>This is <em>not</em> what I want either:</p>
  
  <p><img src="https://i.stack.imgur.com/QejyG.png" alt="undesired tabs"></p>
  
  <p><strong>Update 4:</strong> The upcoming Bootstrap 3 appears to have full-width tabs as a standard component using the class <code>.nav-justified</code>: <a href="http://getbootstrap.com/components/#nav-justified" rel="noreferrer">Bootstrap 3 -> Navs -> Justified nav</a></p>