title: Bootstrap 3 responsive table with first fixed column
body: <p>I followed <a href="https://stackoverflow.com/questions/19737306/bootstrap-3-responsive-table-with-fixed-first-column?lq=1">this</a> and <a href="https://stackoverflow.com/questions/30449054/fix-first-column-of-a-bootstrap-table?lq=1">this</a> post to lock width of first column. Table is responsive and I want to achieve fixed width of first column when I resize the table. I tried <a href="https://stackoverflow.com/a/30450495">Guruprasad's</a> post, but it doesn't work.</p>
  
  <p><a href="http://jsfiddle.net/0t6t21rg/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-bordered table-hover table-condensed"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Number&lt;/th&gt;
                  &lt;th&gt;Table heading&lt;/th&gt;
                  &lt;th&gt;Table heading&lt;/th&gt;
                  &lt;th&gt;Table heading&lt;/th&gt;
                  &lt;th&gt;Table heading&lt;/th&gt;
                  &lt;th&gt;Table heading&lt;/th&gt;
                  &lt;th&gt;Table heading&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;First&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Second&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Third&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
                  &lt;td&gt;Table cell&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.table&gt;thead:first-child&gt;tr:first-child&gt;th:first-child
  {
      position: absolute;
      display: inline-block;
      height:100%;
  }
  .table&gt; tbody &gt; tr &gt; td:first-child
  {
      position: absolute;
      display: inline-block;
      height:100%;
  
  }
  .table&gt;thead:first-child&gt;tr:first-child&gt;th:nth-child(2)
  {
      padding-left:40px;
  }
  .table&gt; tbody &gt; tr &gt; td:nth-child(2)
  {
      padding-left:50px !important;
  
  }
  </code></pre>