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

时间：2016-05-19 19:56:54

标签： twitter-bootstrap html-table

我正在构建一个引导表，我需要将一列拆分成两个相等的部分。以下是我目前的解决方案，但我觉得这个问题有一个更优雅的方法。我已尝试使用colspan =“2”进行测试，但没有成功。这个问题有更好的解决方案吗？这感觉像是一个普遍的问题。 

fn main() {
    let mut fields = FieldNames::new();
    {
        let mut encoder = FieldsEncoder::new(&mut fields);
        S::default().encode(&mut encoder).unwrap();
    }

    println!("{:?}", fields.names);
}

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

.line {
  border-right: 1px solid black;
}

小提琴：Here 确保将小提琴上的<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>窗口展开到1000px以上才能正确查看问题。

1 个答案:

答案 0 :(得分：0)

我已将第二行移至<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>

相关问题
最新问题