4

Bom tenho uma tabela que montei com css. Preciso adicionar uma observação dentro de algumas linhas, ou seja não vai ser em todas as linhas.

O problema e que não estou conseguindo, tentei postar a dúvida aqui de uma outra forma, mas a solução não ficou muito boa.

Bom segue uma imagem do que preciso fazer.

inserir a descrição da imagem aqui

Segue o código html e css:

.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%;
}
<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>
        </table>

Alguém sabe uma maneira legal de fazer isso?

2
  • Hugo, é necessário ser uma tabela com <table> ? Commented 7/02/2017 às 13:45
  • Bom sim, pois ja tenho as tabelas do sistema configurada com o css, uso tabela para informar dados tabulados, como listas de clientes e etc... Commented 7/02/2017 às 13:59

3 Respostas 3

3

Você pode usar dois parágrafos dentro do seu <td>

.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%;
}
.observacao {
  font-size: 14px;
  color: #ccc;
}
<table class="tab_dados">
  <tr>
    <th>NOME</th>
    <th>IDADE</th>
    <th>ESTADO</th>
  </tr>

  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <div>
      <td>
        <p>Antonio da Silva Sauro</p>
        <p class="observacao">Observação</p>
      </td>
    </div>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
</table>

3
  • Dessa forma não da certo, pois fica preso dentro da coluna da tabela. E se o texto for grande vai achatar as outras colunas. Commented 7/02/2017 às 13:23
  • @HugoBorges virão textos de que tamanho? Commented 7/02/2017 às 13:30
  • então o texto que que sobrepor as colunas, pois ele não tem um tamanho fixo. Commented 7/02/2017 às 14:00
2

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(4)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');

tabela.find('tr.obs:visible').each(function () {

var color = ($(this).prev().hasClass('odd') ? '#fff' : '#f7f7f7');

$(this).find('td').css({'border-top': '1px solid ' + color +'', 'background-color': ''+color+''});
});
.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>

6
  • sim, só falta remover a linha que fica entre o colspan, tem como? Commented 7/02/2017 às 16:54
  • coloque na border-top: 1px solid #fff; na classe da obs
    – LLeon
    Commented 7/02/2017 às 16:57
  • @HugoBorges, editei o snippet, veja se é isso.
    – LLeon
    Commented 7/02/2017 às 17:01
  • ok vlw pela ajuda :) Commented 7/02/2017 às 17:08
  • @HugoBorges, blz! Editei de novo lá, aí você consegue deixar a obs no mesmo fundo da linha, branco ou cinza. Só js, sem css. Agora é só brincar e ir aprimorando. :)
    – LLeon
    Commented 7/02/2017 às 17:13
2

Considere as observacoes como simples span contidos nas td da tua table. Use a balisa br para quebrar a linha entre o dado e a observacao :

<td class="observacao">HUGO <br><span>*observacao fica aqui</span></td>

En seguida no teu ficheiro .css centralise o alinhamento do conteudo da td desse jeito a observacao ficara por baixo do dado e os dois estaro centralisados relativamente ao td.

Minimise a font da observacao de modo que torne facil distingui-lo da informacao principal ! ... Aqui tens um exemplo :

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

.observacao { text-align: center;}
.observacao span{ font-size: 10px;}
<table class="tab_dados">
            <tr>
                <th>NOME</th>
                <th>IDADE</th>
                <th>ESTADO</th>
            </tr>

            <tr>
                <td class="observacao">HUGO <br><span>*observacao fica aqui</span></td>
                <td>26</td>
                <td>MG</td>
            </tr>
            <tr>
                <td class="observacao">HUGO <br><span>*observacao fica aqui</span></td>
                <td>26</td>
                <td>MG</td>
            </tr>
            <tr>
                <td>HUGO</td>
                <td>26</td>
                <td>MG</td>
            </tr>
        </table>

13
  • Dessa forma não da certo, pois fica preso dentro da coluna da tabela. E se o texto for grande vai achatar as outras colunas. Commented 7/02/2017 às 13:26
  • @HugoBorges você testou um caso com textos grandes ? Pode testar se possivel e dizer-me o que acontece nesse caso !? Desse jeito poderei aprofundar a minha analisa e editar a resposta !
    – PululuK
    Commented 7/02/2017 às 13:33
  • Sim, com o texto grande ele achata as outras colunas Commented 7/02/2017 às 13:59
  • Mais você nao falou disso na sua questao ... Poderia mandar uma captura pra ver como esta o resulatdo nesse caso ?
    – PululuK
    Commented 7/02/2017 às 14:01
  • Bom eu postei a foto de como deveria ficar. Segue o link de como esta ficando. i.imgur.com/ml4DpRZ.png .Repare como a 'td' achata as outras Commented 7/02/2017 às 15:04

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 .