1

Montei uma tabela em css, porém estou tendo um problema, queria deixar a linha com colspan unida com a linha de cima. Reparem que as cores não fica iguais, ou seja a cor da linha com colspan tem que ser a mesma cor da linha de cima.

.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tab_dados a {
  color: #484848;
  text-decoration: none;
}
.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}
.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}
.tab_dados tr:hover {
  background: #F1F1F1;
}
tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
<!-- TABELA -->
<table class="tab_dados">
  <tr>
    <th>ccc</th>
    <th>ccc</th>
    <th>cccc</th>
    <th>ccc</th>
    <th>cccc</th>
  </tr>


  <tr>
    <td>&nbsp;</td>
    <td>xxxx</td>
    <td>xxxx</td>
    <td>xxxxx</td>
    <td>xxxx</td>
  </tr>
  <tr>
    <td colspan="5">Essa linha tem que ficar unica com a linha de cima</td>
  </tr>
  
   <tr>
    <td>&nbsp;</td>
    <td>xxxx</td>
    <td>xxxx</td>
    <td>xxxxx</td>
    <td>xxxx</td>
  </tr>
  <tr>
    <td colspan="5">Essa linha tem que ficar unica com a linha de cima</td>
  </tr>
  
   <tr>
    <td>&nbsp;</td>
    <td>xxxx</td>
    <td>xxxx</td>
    <td>xxxxx</td>
    <td>xxxx</td>
  </tr>
  <tr>
    <td colspan="5">Essa linha tem que ficar unica com a linha de cima</td>
  </tr>
  
</table>

1 Resposta 1

3

O problema não é o colspan. Você colocou no CSS pras linhas da tabela irem alternado a cor, chamado de regra par ímpar. Isso é feito nessa parte do código:

.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}

Nessa parte:

  • even corresponde às linhas pares
  • odd às linhas ímpares

Por isso coloriu de uma em uma.

Para deixar de dois em dois você pode usar:

.tab_dados tr:nth-child(4n), tr:nth-child(4n-1) {
  background: #F7F7F7;
}

.tab_dados tr:nth-child(4n-2), tr:nth-child(4n-3){
  background: #FFFFFF;
}

Nesse código, está fazendo grupos de 4, então você pode ver que pode ter cada elemento 4 e cada elemento 4 menos um ser branco, em seguida, cada elemento 4 menos dois, ou cada elemento 4 menos 3 sendo cinza.

Alterei o cabeçalho para thead e para o hover acompanhar as linhas acrescentei um data-group nas tr e fiz uma função.

// Hover nas duas linhas juntas
$(document).ready(function(){
  $('tr').hover(function() {
    $('tr[data-group="'+$(this).data('group')+ '"]').toggleClass('hover');
  });
});
.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.tab_dados a {
  color: #484848;
  text-decoration: none;
}

.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}

.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}

/*Colorir de dois em dois*/
.tab_dados tr:nth-child(4n), tr:nth-child(4n-1) {
  background: #F7F7F7;
}

.tab_dados tr:nth-child(4n-2), tr:nth-child(4n-3){
  background: #FFFFFF;
}
 
/*Remover a borda*/
.tab_dados tr:nth-child(2n-1){
  border-bottom: none; 
}

.tab_dados tr.hover{
  background:#F1F1F1;
}

tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!-- TABELA -->
<table class="tab_dados">
  <thead>
    <th>ccc</th>
    <th>ccc</th>
    <th>cccc</th>
    <th>ccc</th>
    <th>cccc</th>
  </thead>


  <tr data-group="1">
    <td>&nbsp;</td>
    <td>xxxx</td>
    <td>xxxx</td>
    <td>xxxxx</td>
    <td>xxxx</td>
  </tr>
  <tr data-group="1">
    <td colspan="5">Essa linha tem que ficar unica com a linha de cima</td>
  </tr>

  <tr  data-group="2">
    <td>&nbsp;</td>
    <td>xxxx</td>
    <td>xxxx</td>
    <td>xxxxx</td>
    <td>xxxx</td>
  </tr>
  <tr  data-group="2">
    <td colspan="5">Essa linha tem que ficar unica com a linha de cima</td>
  </tr>

  <tr  data-group="3">
    <td>&nbsp;</td>
    <td>xxxx</td>
    <td>xxxx</td>
    <td>xxxxx</td>
    <td>xxxx</td>
  </tr>
  <tr  data-group="3">
    <td colspan="5">Essa linha tem que ficar unica com a linha de cima</td>
  </tr>     

</table>

Fonte: nth-child for every two table rows.

Veja a compatibilidade dos navegadores: W3C ou Can i use.

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 1/03/2017 às 20:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .