title: Table content should not wrap with fixed table column
body: <p>I want to achieve two things:
  1. Table cell content should not wrap in second line unless separated by "br" tag.
  2. Table header columns should remain fixed with scrollable table.
  HTML:</p>
  
  <pre><code>&lt;a href="javascript:;" onclick="document.getElementById('search-history-popup').style.display='block'"&gt;Popuup&lt;/a&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;div style="position:relative"&gt;
  &lt;div id="search-history-popup" style="display:none; position:absolute"&gt;
      &lt;div&gt;
      &lt;table class="table table-bordered table-hover"&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
          &lt;th colspan="2"&gt;Criteria&lt;/th&gt;
          &lt;th&gt;Results&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Long Name&lt;br/&gt;Short Name&lt;/td&gt;&lt;td&gt;&lt;b&gt;Sample Personal (PFA)&lt;/b&gt;&lt;br/&gt;Sample (PFA)&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Long Name&lt;/td&gt;&lt;td&gt;&lt;b&gt;Longer text Sample Personal (PFA)&lt;/b&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Long Name&lt;/td&gt;&lt;td&gt;&lt;b&gt;More n more text to checj width Sample Personal (PFA)&lt;/b&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Long Name&lt;/td&gt;&lt;td&gt;&lt;b&gt;Sample Personal (PFA)&lt;/b&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Long Name&lt;/td&gt;&lt;td&gt;&lt;b&gt;Sample Personal (PFA)&lt;/b&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Long Name&lt;/td&gt;&lt;td&gt;&lt;b&gt;Sample Personal (PFA)&lt;/b&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {font:normal 12px Arial}
  .table {
    margin-bottom: 5px; 
    padding:0;
  }
  .table-bordered {
    margin-top: 5px; 
  }
  .table-bordered th {
      background-color: #f9f9f9; 
      border:1px solid green;
      padding: 4px 8px;   
  }
  .table-bordered td {
      line-height: 2em;
      padding: 4px 8px; 
      border:1px solid green;
  }
  .table-hover &gt; tbody &gt; tr:hover &gt; td {
    background-color: #EEFFE1;
    cursor: pointer; 
  }
  .innertable {height:250px; overflow:auto; border:1px solid #000;}
  </code></pre>
  
  <p>JS Fiddle links:
  Without scrollbar - table data is not wrapping up:
  <a href="http://jsfiddle.net/L4j1vab2/1/" rel="nofollow">http://jsfiddle.net/L4j1vab2/1/</a></p>
  
  <p>But as soon as I apply scrollbar through fix height and overflow, table data is getting wrapped.
  <a href="http://jsfiddle.net/L4j1vab2" rel="nofollow">http://jsfiddle.net/L4j1vab2</a></p>
  
  <p>Please click on the link "Popuup" to see the popup-table:</p>
  
  <p>My requirement is table data should not wrap, and table data should be scrollable keeping table headers fixed.</p>