Skip to main content
2 de 4
adicionou 112 caracteres ao conteúdo
LLeon
  • 2,6mil
  • 2
  • 15
  • 10

Veja se isso resolve seu problema:

var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(3)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.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;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>

LLeon
  • 2,6mil
  • 2
  • 15
  • 10