colspan with css

Question

colspan with css

Navigation

#1 by (3 votes)

1

I mounted a table in css, however I'm having a problem, I wanted to leave the line with colspan attached to the top line. Notice 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>

html css

asked by anonymous 02.02.2017 / 18:34

1 answer

error: "failed to open stream: No such file or directory" Format date on page load

score 3 · Accepted Answer

The problem is not colspan . You put in CSS pras table rows go alternating color, called odd pair 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 this part:

even corresponds to even lines
odd to odd rows

So it colored one by one.

To leave two by two 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, doing groups of 4, so you can see that can have each element 4 and each element 4 least one being white, then each element 4 least two, or each element 4 minus 3 being gray.

I changed the header to thead and the% hover follow the lines added a data-group %% in tr and made 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--><tableclass="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 browser compatibility W3C or Can i use .