How to add a div or p within a table

Question

How to add a div or p within a table

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)

4

Well I have a table that I set up with css. I need to add a note within a few lines, ie it will not be on all lines.

The problem and I'm not getting it, I tried to post the doubt here in another way, but the solution was not very good.

Good follows an image of what I need to do.

Followthehtmlandcsscode:

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

Does anyone know a cool way to do this?

html jquery css

asked by anonymous 07.02.2017 / 14:04

3 answers

3

You can use two paragraphs within your <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>

07.02.2017 / 14:08

2

Consider the observations as simple span contained in td of your table . Use the br flag to break the line between the data and the observation:

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

Next in your file .css center the content alignment of td that way the observation will be below the data and the two will be centralized relative to td .

Minimize% of the observation so that it is easy to distinguish it from the main information! ... Here's an example:

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

07.02.2017 / 14:23

RETURN THE SUM OF MAXIMUM 3 VALUES IN SQL How to save a video captured by webcam without showing it using OpenCV in python?

score 2 · Accepted Answer

See if this solves your problem:

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><tableclass="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>