title: How two split one column into two with a bootstrap table
body: <p>I'm building a bootstrap table and I need to split one column into two equal sections. Below is the solution I currently have but I feel like there's a more elegant approach to this issue. I've tried testing with colspan="2" but had no success. Is there a better solution to this issue? It feels like a common problem. </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>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
  
  .line {
    border-right: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"&gt;
  
  &lt;table class="table table-striped"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Organism&lt;/th&gt;
        &lt;th&gt;Pass&lt;/th&gt;
        &lt;th&gt;Fail&lt;/th&gt;
        &lt;th&gt;DNA Score&lt;/th&gt;
        &lt;th&gt;RNA Score&lt;/th&gt;
        &lt;th&gt;DNA Reads&lt;/th&gt;
        &lt;th&gt;RNA Reads&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line" style="font-family:'Nunito"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6" style="font-family:'Nunito"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line" style="font-family:'Nunito"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6" style="font-family:'Nunito"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
        &lt;td&gt;Pseudomonas putida&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;95&lt;/td&gt;
        &lt;td&gt;92&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;99&lt;/div&gt;
          &lt;div class="col-md-6"&gt;75&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
        &lt;td&gt;Human adenovirus_B&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;95&lt;/td&gt;
        &lt;td&gt;92&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;97&lt;/div&gt;
          &lt;div class="col-md-6"&gt;88&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
        &lt;td&gt;Legionella longbeachae&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;52&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;95&lt;/div&gt;
          &lt;div class="col-md-6"&gt;78&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
        &lt;td&gt;Streptococcus intermedius&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;23&lt;/td&gt;
        &lt;td&gt;11&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;91&lt;/div&gt;
          &lt;div class="col-md-6"&gt;76&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      
      &lt;tr&gt;
        &lt;td&gt;Morganella morganii&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;56&lt;/td&gt;
        &lt;td&gt;88&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;93&lt;/div&gt;
          &lt;div class="col-md-6"&gt;77&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;HPIV-4&lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt;65&lt;/td&gt;
        &lt;td&gt;72&lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;90&lt;/div&gt;
          &lt;div class="col-md-6"&gt;77&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div class="col-md-6 line"&gt;mean&lt;/div&gt;
          &lt;div class="col-md-6"&gt;SD&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/10eh6uvh/" rel="nofollow noreferrer">Here</a> 
  Make sure you expand the <code>result</code> window on the fiddle to above 1000px to see the issue correctly. </p>