iGene Conditions Table (Bahasa)

by Thet Hlaing

HTML

<div class='conditionheader'>
Trisomi Aneuploidies
</div>
<div id="conditiontable_1stgroup" class="conditiontable">
<div>T21<br/>
 <span>(Down Syndrome)</span>
</div>	
<div>T18<br/>
  <span>(Edwards Syndrome)</span></div>
<div>	T13<br/>
  <span>(Patau Syndrome)</span></div>
 <div>T22<br/>
 <span>Trisomi 22</span>
</div>	
<div>T16<br/>
 <span>Trisomi 16</span></div>
<div>T9<br/>
 <span>Trisomi 9</span></div>
</div>
<div class='conditionheader'>Kromosom Aneuploidies terkait Sex</div>
<div id="conditiontable_2ndgroup" class="conditiontable">
<div>Trisomi X<br/>
 <span>(Syndrome Triple X)</span>
</div>
<div>Monosomi X<br/>
 <span>(Turner Syndrome)</span></div>
<div>	XXY<br/>
 <span>(Klinefelter Syndrome)	</span></div>
<div>XYY<br/>
<span>(Jacobs Syndrome)</span></div>
</div>
<div class='conditionheader'>Microdelesi Syndrome</div>
<div id="conditiontable_3rdgroup" class="conditiontable">
<div>5p deletion syndrome   <br/>                 
<span>(Syndrome Cri du Chat)</span>
</div>
<div>1p36 deletion syndrome</div>
<div>2q33.1 microdeletion syndrome</div>
<div>16p12.2 deletion syndrome   </div>
<div>11q23 microdeletion syndrome <br/> <span>Jacobsen Syndrome</span></div>
<div>	1q32.2 microdeletion syndrome<br/>                      
<span>Syndrome Van der Woude</span></div>
<div id="fill_row">15q11.2 microdeletion syndrome <br/>
<span>Prader Willi / Angelman Syndrome</span></div>
</div>     
<div class='conditionheader'>Fetal Sex</div>

CSS

.conditionheader{background-color:#532C6C;color:#fff; text-align:center;border:1px solid #fff;padding:5px 0px;}
.conditiontable{display:flex;flex-flow:row;flex-wrap: wrap; align-items:stretch;  background-color:#E4E0E9; text-align:center;}
.conditiontable div{border-right:1px solid #fff;border-bottom:1px solid #fff; color:#532C6C;padding:5px 0px;font-weight:500px;}
.conditiontable span{font-weight:300px;font-style:italic;}
#conditiontable_1stgroup div,#conditiontable_3rdgroup div{width:33.1%;}
#conditiontable_2ndgroup div{width:24.8%;}
#conditiontable_3rdgroup #fill_row{width:100%}

@media screen and (max-width:600px){
  .conditiontable{flex-flow:column;}
  #conditiontable_1stgroup div,#conditiontable_2ndgroup div,#conditiontable_3rdgroup div{width:100%;}
}