How to add a div or <p> inside a table

Asked

Viewed 937 times

4

Well I have a table that I’ve assembled with css. I need to add an observation within a few lines, IE will not be in all lines.

The problem is that I am not succeeding, I tried to post the doubt here in another way, but the solution was not very good.

Well follows a picture of what I need to do.

inserir a descrição da imagem aqui

Follow html and css code:

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

jquery html css

  • Hugo, it is necessary to be a table with <table> ?

  • Good, because I already have the tables of the system configured with css, use table to inform tabulated data, as customer lists and etc...

3 answers

3

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

  • This way is not right, because it gets stuck inside the table column. And if the text is large it will flatten the other columns.

  • @Hugoborges will come texts of that size?

  • then text that overwrites the columns as it does not have a fixed size.

2

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

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

Next in your file .css the alignment of the contents of the td this way the observation will be below the data and the two will be centralised in relation to the td.

Minimise to font observation so that it makes it easy to distinguish it from the main information ! ... Here is 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>

  • This way is not right, because it gets stuck inside the table column. And if the text is large it will flatten the other columns.

  • @Hugoborges you tested a case with large texts ? Can you test if possible and tell me what happens in this case !? This way I can deepen my analysis and edit the answer !

  • Yeah, with the big text he flattens the other columns

  • But you didn’t mention it in your question ... You could send a catch to see how is the resulated in this case ?

  • Well I posted the photo of how it should look. Follow the link of how it looks. http://i.imgur.com/ml4DpRZ.png . Notice how the 'td' flattens the others

  • @Hugoborges adds a max-height in this case so that the texts do not ``overflow the td and a text-overflow .... Here is a link for more information : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp !

  • edit your answer, if it works out I’ll mark it

  • another solution I tried was like this: '<tr> <td colspan="3">OBS</td> </tr>' The problem is that css creates a different background. I could work it out in css?

  • @Hugoborges show the result !!

  • Ok, follow the image. http://i.imgur.com/peBN0z0.png lines with colspan have to be joined together

  • @Hugoborges is because of that there : .tab_dados tr:nth-child(odd) {&#xA; background: #F7F7F7;&#xA;} &#xA;.tab_dados tr:nth-child(even) {&#xA; background: #FFFFFF;&#xA;} ... You set that in the code !!+

  • So I know, what I wanted was for this rule to be ignored in a '<tr>' or a line that contains colspan, you can click a class for this?

  • @Hugoborges, see if my answer helps you.

Show 8 more comments

2


See if that 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>


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

  • yes, all that remains is to remove the line between colspan,?

  • put on border-top: 1px Solid #fff; in Obs class

  • @Hugoborges, I edited the snippet, see if that’s it.

  • ok vlw by the help :)

  • @Hugoborges, blz! I edited again there, then you can leave the Obs at the same bottom of the line, white or gray. js only, no css. Now just play and work it out. :)

  • blz, now I’m going to adapt here, thank you very much

Show 1 more comment

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.