Camparison Table

by Thet Hlaing

HTML

<div id="igene_comparision">
<div class="types">
  <div>
  </div>
  <div class="igene">
  iGene™
  </div>
  <div>
  1st Trimester Screening 
  </div>
  <div>
  Nuchal Translucency Screening 
  </div>
  <div>
 Triple Test
  </div>  
</div>
<div>
  <div>
    Detection Rate 
  </div>
  <div class="igene">
   >99 %5
  </div>
  <div>
  80-90%<sup>2</sup>
  </div>
  <div>
  75-80%<sup>3</sup>
  </div>
  <div>
 65-70%3
  </div> 
</div>
<div>
   <div>
   Testing Period <br/>
  (Week of pregnancy)
  </div>
  <div class="igene">
  As early as 10th week
  </div>
  <div>
  11th- 14th weeks 
  </div>
  <div>
  11th- 14th weeks
  </div>
  <div>
  15th- 20th weeks
  </div> 
</div>
<div class="types">
  <div>
  </div>
  <div class="igene">
  iGene™
  </div>
  <div>
  1st Trimester Screening 
  </div>
  <div>
  Nuchal Translucency Screening 
  </div>
  <div>
 Triple Test
  </div>  
</div>
<div>
 <div>
   How is it performed?
  </div>
  <div class="igene">
  10ml of Maternal Blood
  </div>
  <div>
  Maternal Blood &amp; Ultrasound Test 
  </div>
  <div>
  Ultrasound Test
  </div>
  <div>
 Maternal Blood 
  </div> 
</div>
<div>
   <div>
   False Positive Rate for T21 
  </div>
  <div class="igene">
  0.05%<sup>5</sup>
  </div>
  <div>
  Up to 5%<sup>2</sup>
  </div>
  <div>
  Up to 5%<sup>3</sup>
  </div>
  <div>
   Up to 5%<sup>3</sup>
  </div> 
</div>
<div class="types">
  <div>
  </div>
  <div class="igene">
  iGene™
  </div>
  <div>
  1st Trimester Screening 
  </div>
  <div>
  Nuchal Translucency Screening 
  </div>
  <div>
 Triple Test
  </div>  
</div>
<div>
  <div>
  Positive Predictive Value  (PPV) 
  </div>
  <div class="igene">
  99.3%<sup>4</sup> for T21
  </div>
  <div>
  4.2%<sup>5</sup> for T21
  </div>
  <div>
  Not applicable
  </div>
  <div>
Not applicable
  </div> 
</div>
</div>

CSS

#igene_comparision{display:flex; flex-direction:column;}
#igene_comparision>div{width:100%; min-height:50px; background-color:#9A85A6;margin:1px;color:#fff; flex-direction:row; display:flex;}
#igene_comparision>div>div{width:200px; height:50px; border-left:1px solid #fff; padding:10px 5px 0px; text-align:center;}
#igene_comparision>div>div:first-child{text-align:left;}
#igene_comparision>div:nth-child(4),#igene_comparision>div:nth-child(7){display:none;}
#igene_comparision>div>.igene{background-color:#53265F;}

@media screen and (max-width:600px){
  #igene_comparision{flex-wrap:wrap; flex-direction:row;}
  #igene_comparision>div{width:32.2%; flex-direction:column;}
  #igene_comparision>div>div{width:auto;height:60px;}
  #igene_comparision>div>div:first-child{text-align:center;}
  #igene_comparision .types div{text-align:left;}
  #igene_comparision>div:nth-child(4),#igene_comparision>div:nth-child(7){display:flex;}
}