EOL NEW table CSS 2.0
HTML
<table class="eoltable">
<tr>
<th class="blank" style="width: 20%"></th>
<th style="width: 10%">Atmosphere</th>
<th style="width: 10%">Hekate IPL</th>
<th style="width: 10%">SX OS</th>
<th style="width: 10%">SX PRO</th>
<th style="width: 30%">Descripción</th>
</tr>
<tr>
<td class="separator" colspan="6">Compatibilidad del hardware</td>
</tr>
<tr>
<th>Nintendo Switch</th>
<td>Si</td>
<td>Si</td>
<td>Si</td>
<td>Si</td>
<td>Compatible con Nintendo Switch Pre-Mariko</td>
</tr>
<tr>
<th>Nintendo Switch (Mariko)</th>
<td>Nn/Nc</td>
<td>Nn/Nc</td>
<td>Nn/Nc</td>
<td>Nn/Nc</td>
<td>Compatible con Nintendo Switch Mariko</td>
</tr>
<tr>
<td class="separator" colspan="6">Compatibilidad del software</td>
</tr>
<tr>
<th>Versiones compatbiles</th>
<td> Todas con F-G<br>
Hasta 4.1.0 via Soft.</td>
<td> Todas con F-G</td>
<td> Todas con F-G</td>
<td> Todas con F-G</td>
<td>Versiones del firmware compatibles</td>
</tr>
<tr>
<th>Compatible con Pegaswitch</th>
<td>Si</td>
<td>No</td>
<td>No</td>
<td>No</td>
<td>Si utiliza pegaswitch</td>
</tr>
<tr>
<th>Compatible con Fusee-gelee</th>
<td>Si</td>
<td>Si</td>
<td>Si</td>
<td>Si</td>
<td>Si utiliza Fusee Gelee</td>
</tr>
<tr>
<th>Requiere dongle</th>
<td>Opcional</td>
<td>Opcional</td>
<td>Opcional</td>
<td>Activación</td>
<td>Si utiliza pegaswitch</td>
</tr>
<tr>
<td class="separator" colspan="6">Especificaciones del software</td>
</tr>
<tr>
<th>Carga juegos fisicos</th>
<td>Si</td>
<td>Si</td>
<td>Ns/Nc</td>
<td>Ns/Nc</td>
<td>Si carga juegos en cartucho</td>
</tr>
<tr>
<th>Carga juegos digitales</th>
<td>Si</td>
<td>Si</td>
<td>Si</td>
<td>Si</td>
<td>Si carga juegos comprados en la eShop</td>
</tr>
<tr>
<th>Carga backups de juegos...
CSS
/*PARA EL TEMPLATE POR DEFECTO*/
body {
font-family: calibri;
background-color: #eaf5ea;
}
/* -- COLORES --*/
.eoltable td {
border-color: #e3e3e3;
color: #000;
background-color: #eaf5ea;
}
.eoltable tr:hover td {
background-color: #cfdccf;
}
.eoltable th {
background-color: #395a30;
border-color: #5e7756;
color: #fff;
}
.eoltable td.separator {
background-color: #fff !important;
color: #000;
border-bottom-color: #ff7f00;
box-shadow: inset 0px 1px #ddd;
}
.eoltable tr:nth-child(1) td, .eoltable tr:nth-child(1) th {
border-top-color: #ff7f00;
}
.eoltable tr:nth-last-child(1) td, .eoltable tr:nth-last-child(1) th {
border-bottom-color: #ff7f00;
}
/* -- ESTRUCTURA --*/
.eoltable {
border-collapse: collapse;
}
.eoltable .blank {
border: 0 !important;
color: transparent;
background-color: transparent;
}
.eoltable td {
border-width: 1px;
border-style: solid;
padding: 5px;
position: relative;
}
.eoltable th {
border-width: 1px;
border-style: solid;
padding: 5px 10px;
}
.eoltable td.separator {
text-align: center;
font-weight: 600;
border-bottom-width: 2px;
border-bottom-style: solid;
padding: 3px 0;
}
.eoltable tr:nth-child(1) td, tr:nth-child(1) th {
border-top-width: 2px;
border-top-style: solid;
}
.eoltable tr:nth-last-child(1) td, .eoltable tr:nth-last-child(1) th {
border-bottom-width: 4px;
border-bottom-style: solid;
}