两个如何使用引导表将一列分成两列

Question

我正在构建一个引导表，我需要将一列分成两个相等的部分。以下是我目前拥有的解决方案，但我觉得有一个更优雅的方法来解决这个问题。我试过用 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 确保将小提琴上的 result 窗口扩展到 1000 像素以上以正确查看问题。

Answer 1

我已将第二行移至<thead>，其中包含一些colspan 和rowspan。我已经为表头设置了一个样式。

我还从单元格中删除了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>