colspan with css

Question

I set up a table in css, but I’m having a problem, I wanted to leave the line with colspan connected with the top line. Note that the colors do not match, that is the color of the line with colspan has to be the same color as the top line.

.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>

Answer 1

The problem is not the colspan. You put in the CSS so that the rows in the table alternate the color, called odd rule. This is done in this part of the code:

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

In that part:

• even corresponds to even lines
• odd at odd lines

So he colored one by one.

To leave two at a time you can use:

.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;
}

In this code, you’re making groups of 4, so you can see that you can have each element 4 and each element 4 minus one be white, then each element 4 minus two, or each element 4 minus 3 being gray.

I changed the heading to thead and to the hover follow the lines I added a data-group in tr and did a function.

// 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>

Source: Nth-Child for Every two table Rows.

See the browser compatibility: W3C or Can i use.