0
Good afternoon guys, I’m getting a problem here on my table If I define td’s to "GCOI, GCTA and GOAG", the GCTA line has a different background color than the others, if I set th’s to "GCOI, GCTA and GOA", I lose the lines that divide the cells. How can I fix this? Follow below the codes:
.datagrid table { /* definição da tabela dentro da div que tem a class datagrid */
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid { /* definição da div */
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #3D0F99;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.datagrid table td, .datagrid table th { /* definição das td's e th's dentro da div da class dategrid */
padding: 8px 20px;
}
.datagrid table thead th { /* definição das thdead's e das th's dentros das thead's da div class dategrid */
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0700fc), color-stop(1, #362B7F) );
background:-moz-linear-gradient( center top, #0700fc 5%, #362B7F 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0700fc', endColorstr='#362B7F');
background-color:#0C0299;
color:#FFFFFF;
font-size: 16px;
font-weight: bold;
}
.datagrid table thead th:first-child { /* definição do filho(primeiro elemento) de thead da tabela que está na div class dategrid */
border: none;
}
.datagrid table tbody td { /* definição das tag's td que estão dentro da tag tbody da div class dategrid */
color: #6B6B6B;
border-left: 4px solid #EBF9FF;
font-size: 14px;
border-bottom: 4px solid #E1EEF4;
font-weight: normal;
}
.datagrid table tbody .alt td { /* definição da tag tbody e td da class alt da div class dategrid */
background: #FFE3E3;
color: #0A0808;
}
.datagrid table tbody th:first-child { /* definição do filho(primeiro elemento) da tag tbody que contém a tag td da div class dategrid*/
border-left: none;
}
.datagrid table tbody tr:last-child th { /* definição do filho(ultimo elemento) da tag tbody que contém a tag tr para td da div */
border-bottom: none;
}<div class="datagrid">
<table id="table-sparkline">
<thead>
<tr>
<th>Setor</th>
<th>Entrada M.M</th>
<th>Entrada Atual</th>
<th>Saída M.M</th>
<th>Saída Atual</th>
<th>Saldo M.M</th>
<th>Saldo Atual</th>
<th>Estoque M.M</th>
<th>Estoque Atual</th>
<th>Idade em Estoque M.M</th>
<th>Idade em Estoque Atual</th>
<th>Lead Time M.M</th>
<th>Lead Time Atual</th>
</tr>
</thead>
<tbody id="tbody-sparkline">
<tr>
<th>GCOI</th>
<td data-sparkline="149, 177, 184, 170"/>
<td>NAN</td>
<td data-sparkline="139, 188, 81, 130"/>
<td>NAN</td>
<td data-sparkline="10, -11, 103, 40; column"/>
<td>NAN</td>
<td data-sparkline="937, 926, 1029, 1069"/>
<td>NAN</td>
<td data-sparkline="212, 234, 231, 236"/>
<td>NAN</td>
<td data-sparkline="111, 54, 94, 120"/>
<td>NAN</td>
</tr>
<tr class="alt">
<th>GCTA</th>
<td data-sparkline="87, 61, 38, 64"/>
<td>NAN</td>
<td data-sparkline="104, 51, 44, 27"/>
<td>NAN</td>
<td data-sparkline="-17, 10, -6, 37; column"/>
<td>NAN</td>
<td data-sparkline="881, 891, 885, 922"/>
<td>NAN</td>
<td data-sparkline="331, 349, 372, 377"/>
<td>NAN</td>
<td data-sparkline="183, 159, 212, 283"/>
<td>NAN</td>
</tr>
<tr>
<th>GOAG</th>
<td data-sparkline="331, 317, 168, 191"/>
<td>NAN</td>
<td data-sparkline="309, 270, 233, 163"/>
<td>NAN</td>
<td data-sparkline="22, 47, -65, 28; column"/>
<td>NAN</td>
<td data-sparkline="1740, 1787, 1722, 1750"/>
<td>NAN</td>
<td data-sparkline="332, 336, 367, 376"/>
<td>NAN</td>
<td data-sparkline="115, 111, 102, 145"/>
<td>NAN</td>
</tr>
</tbody>
</table>
</div>