CODEWITHSUNDEEP
twitter-bootstraphtml-table
NodeJS_dev
NodeJS_dev

Reputation: 251

How two split one column into two with a bootstrap table

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. 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.line {
  border-right: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">

<table class="table table-striped">
  <thead>
    <tr>
      <th>Organism</th>
      <th>Pass</th>
      <th>Fail</th>
      <th>DNA Score</th>
      <th>RNA Score</th>
      <th>DNA Reads</th>
      <th>RNA Reads</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <div class="col-md-6 line" style="font-family:'Nunito">mean</div>
        <div class="col-md-6" style="font-family:'Nunito">SD</div>
      </td>
      <td>
        <div class="col-md-6 line" style="font-family:'Nunito">mean</div>
        <div class="col-md-6" style="font-family:'Nunito">SD</div>
      </td>
    </tr>
    
    <tr>
      <td>Pseudomonas putida</td>
      <td class="text-center"><i class="fa fa-check" aria-hidden="true"></i>
      </td>
      <td class="text-center"><i class="fa fa-times" aria-hidden="true"></i>
      </td>
      <td>95</td>
      <td>92</td>
      <td>
        <div class="col-md-6 line">99</div>
        <div class="col-md-6">75</div>
      </td>
      <td>
        <div class="col-md-6 line">mean</div>
        <div class="col-md-6">SD</div>
      </td>
    </tr>
    
    <tr>
      <td>Human adenovirus_B</td>
      <td class="text-center"><i class="fa fa-check" aria-hidden="true"></i>
      </td>
      <td class="text-center"><i class="fa fa-times" aria-hidden="true"></i>
      </td>
      <td>95</td>
      <td>92</td>
      <td>
        <div class="col-md-6 line">97</div>
        <div class="col-md-6">88</div>
      </td>
      <td>
        <div class="col-md-6 line">mean</div>
        <div class="col-md-6">SD</div>
      </td>
    </tr>
    
    <tr>
      <td>Legionella longbeachae</td>
      <td class="text-center"><i class="fa fa-times" aria-hidden="true"></i>
      </td>
      <td class="text-center"><i class="fa fa-check" aria-hidden="true"></i>
      </td>
      <td>15</td>
      <td>52</td>
      <td>
        <div class="col-md-6 line">95</div>
        <div class="col-md-6">78</div>
      </td>
      <td>
        <div class="col-md-6 line">mean</div>
        <div class="col-md-6">SD</div>
      </td>
    </tr>
    
    <tr>
      <td>Streptococcus intermedius</td>
      <td class="text-center"><i class="fa fa-times" aria-hidden="true"></i>
      </td>
      <td class="text-center"><i class="fa fa-check" aria-hidden="true"></i>
      </td>
      <td>23</td>
      <td>11</td>
      <td>
        <div class="col-md-6 line">91</div>
        <div class="col-md-6">76</div>
      </td>
      <td>
        <div class="col-md-6 line">mean</div>
        <div class="col-md-6">SD</div>
      </td>
    </tr>
    
    <tr>
      <td>Morganella morganii</td>
      <td class="text-center"><i class="fa fa-check" aria-hidden="true"></i>
      </td>
      <td class="text-center"><i class="fa fa-times" aria-hidden="true"></i>
      </td>
      <td>56</td>
      <td>88</td>
      <td>
        <div class="col-md-6 line">93</div>
        <div class="col-md-6">77</div>
      </td>
      <td>
        <div class="col-md-6 line">mean</div>
        <div class="col-md-6">SD</div>
      </td>
    </tr>

    <tr>
      <td>HPIV-4</td>
      <td class="text-center"><i class="fa fa-times" aria-hidden="true"></i>
      </td>
      <td class="text-center"><i class="fa fa-check" aria-hidden="true"></i>
      </td>
      <td>65</td>
      <td>72</td>
      <td>
        <div class="col-md-6 line">90</div>
        <div class="col-md-6">77</div>
      </td>
      <td>
        <div class="col-md-6 line">mean</div>
        <div class="col-md-6">SD</div>
      </td>
    </tr>
  </tbody>
</table>

Fiddle: Here Make sure you expand the result window on the fiddle to above 1000px to see the issue correctly.

Upvotes: 1

Views: 4699

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

I have moved second row to the <thead> with some colspan and rowspan. And I have set up a style for the the table header.

Also I've removed class="text-center" from cells. When the icons are aligned to the left, they are visually connected to the column header.

Check the result:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.table > thead > tr:first-child > th[colspan="2"] {
  border-bottom: 0;
  padding-bottom: 0;
}
.table > thead > tr:last-child > th {
  border-top: 0 !important;
  padding-top: 0 !important;
}
th {
  vertical-align: top !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">

<table class="table table-striped">
  <thead>
    <tr>
      <th rowspan="2">Organism</th>
      <th rowspan="2">Pass</th>
      <th rowspan="2">Fail</th>
      <th rowspan="2">DNA Score</th>
      <th rowspan="2">RNA Score</th>
      <th colspan="2">DNA Reads</th>
      <th colspan="2">RNA Reads</th>
    </tr>
    <tr>
      <th>mean</th>
      <th>SD</th>
      <th>mean</th>
      <th>SD</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Pseudomonas putida</td>
      <td><i class="fa fa-check" aria-hidden="true"></i></td>
      <td><i class="fa fa-times" aria-hidden="true"></i></td>
      <td>95</td>
      <td>92</td>
      <td>99</td>
      <td>75</td>
      <td>mean</td>
      <td>SD</td>
    </tr>
    
    <tr>
      <td>Human adenovirus_B</td>
      <td><i class="fa fa-check" aria-hidden="true"></i></td>
      <td><i class="fa fa-times" aria-hidden="true"></i></td>
      <td>95</td>
      <td>92</td>
      <td>97</td>
      <td>88</td>
      <td>mean</td>
      <td>SD</td>
    </tr>
    
    <tr>
      <td>Legionella longbeachae</td>
      <td><i class="fa fa-times" aria-hidden="true"></i></td>
      <td><i class="fa fa-check" aria-hidden="true"></i></td>
      <td>15</td>
      <td>52</td>
      <td>95</td>
      <td>78</td>
      <td>mean</td>
      <td>SD</td>
    </tr>
    
    <tr>
      <td>Streptococcus intermedius</td>
      <td><i class="fa fa-times" aria-hidden="true"></i></td>
      <td><i class="fa fa-check" aria-hidden="true"></i></td>
      <td>23</td>
      <td>11</td>
      <td>91</td>
      <td>76</td>
      <td>mean</td>
      <td>SD</td>
    </tr>
    
    <tr>
      <td>Morganella morganii</td>
      <td><i class="fa fa-check" aria-hidden="true"></i></td>
      <td><i class="fa fa-times" aria-hidden="true"></i></td>
      <td>56</td>
      <td>88</td>
      <td>93</td>
      <td>77</td>
      <td>mean</td>
      <td>SD</td>
    </tr>

    <tr>
      <td>HPIV-4</td>
      <td><i class="fa fa-times" aria-hidden="true"></i></td>
      <td><i class="fa fa-check" aria-hidden="true"></i></td>
      <td>65</td>
      <td>72</td>
      <td>90</td>
      <td>77</td>
      <td>mean</td>
      <td>SD</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions