Wie zwei Spalten mit einer Bootstrap-Tabelle in zwei geteilt werden

Question

Ich baue eine Bootstrap-Tabelle und ich muss eine Spalte in zwei gleiche Abschnitte aufteilen. Unten ist die Lösung, die ich derzeit habe, aber ich habe das Gefühl, dass es eine elegantere Herangehensweise an dieses Problem gibt. Ich habe versucht, mit Colspan = "2" zu testen, hatte aber keinen Erfolg. Gibt es eine bessere Lösung für dieses Problem? Es fühlt sich an wie ein allgemeines 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 Stellen Sie sicher, dass das result Fenster auf der Geige erweitern oben 1000px richtig das Problem zu sehen.

Answer 1

Ich bin mit colspan und rowspan zweite Reihe in die <thead> verschoben. Und ich habe einen Stil für den Tabellenkopf eingerichtet.

Auch ich habe class="text-center" aus Zellen entfernt. Wenn die Symbole nach links ausgerichtet sind, sind sie visuell mit der Spaltenüberschrift verbunden.

Überprüfen Sie das Ergebnis:

@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>