ブートストラップテーブルを2つに分割して2つに分割する方法

Question

私はブートストラップテーブルを作成しています.1つのカラムを2つの等しいセクションに分割する必要があります。以下は私が現在持っている解決策ですが、この問題に対するよりエレガントなアプローチがあるように感じられます。私はcolspan = "2"でテストしようとしましたが、成功しませんでした。この問題の解決策はありますか？それは共通の問題のように感じます。

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

フィドル：Here あなたは正しく、問題を確認するために上記1000pxにフィドルにresultウィンドウを拡大していることを確認します。

Answer 1

colspanとrowspanで2行目を<thead>に移動しました。そして、私はテーブルのヘッダーのスタイルを設定しました。

また、私は細胞からclass="text-center"を削除しました。アイコンが左に揃えられると、列ヘッダーに視覚的に接続されます。

は、結果を確認します。

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