title: Bootstrap grid inside a TD
body: <p>I have a table with a column that holds grid-like data in a single TD:</p>
  
  <p>1&nbsp;&nbsp;&nbsp;$1,234.56
  <br>2&nbsp;&nbsp;&nbsp;$2,000.00
  <br>11&nbsp;$8,000.00</p>
  
  <p>Rather than specifying a table inside of the TD, I've attempted to use the Bootstrap 3 grid classes. This worked great when my table was small, but adding the grid to a larger table (with more columns) is behaving differently. When the table has too many columns, my two column grid within the TD is wrapping and looks like a one column grid like so:</p>
  
  <p>1<br>
  $1,234.56<br>
  2<br>
  $2,000.00<br>
  11<br>
  $8,000.00</p>
  
  <p>The code I'm using is similar to this, though needs more columns to witness the problem. Full <a href="http://jsfiddle.net/jqagz9nc/" rel="noreferrer">JSFiddle example here.</a></p>
  
  <pre><code>&lt;table class="table"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Header 1&lt;/th&gt;
          &lt;th&gt;Header for 2 column grid&lt;/th&gt;
      &lt;/tr&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Some content
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-2"&gt;1&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;1,234.56&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-2"&gt;13&lt;/div&gt;
                  &lt;div class="col-sm-10"&gt;8,000.00&lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Does anyone have a better suggestion to preserve my two column grid in my TD, using Bootstrap or otherwise?</p>