Problems with my table

0

Good afternoon guys, I'm having a problem here on my table If I define td's for "GCOI, GCTA AND GOAG", the GCTA line has a different background color, if I set th's for "GCOI, GCTA AND GOA", I lose the lines that divide the cells. How can I solve this? Here are 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>
    
asked by anonymous 01.03.2016 / 20:24

2 answers

0

Around the background of GCTA, it references a class in the css (class="alt"), changing the color to red. Follow the code with the color equal to all.

.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>
        <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>
    
01.03.2016 / 20:39
0

Good afternoon!

Remove the alt class in:

<tr class="alt">

She who is generating this conflict.

Hugs.

    
01.03.2016 / 20:46