Create table html and zebrar the same

Asked

Viewed 4,918 times

6

I wonder, how do I zebrar an HTML table? It has only two columns and information is populated dynamically from the controller and BD.

html css

  • Starting point => http://answall.com/questions/173/comormudar-o-fundo-das-linhas-de-umatreela-alternating table

  • 8

    Pnet has to give half the pay p/ the people of Sopt :)

  • 1

    bigown, I thought this was a forum, so I’ve done several posts, of all the things I don’t know how to do. But if there is a restriction to this, just say that I will stop. Now, once I made a comment like this, without anything to do, I was censored. Good, bigown, that here are more people with altruistic spirit than selfish, it makes me believe in the forum. I’ve learned that if you don’t know something, ask, but don’t sleep with doubt.

  • 2

    @pnet take your doubts at will, but ideally you present some doubt within something you have already produced. Example: "I have tried this but it is not as I want, what I do to be able to leave as I want?". This question is a typical Sopt question, shows that you have tried something and are having difficulties in continuing. So there is the possibility to close duplicate questions here, if we would not have the same question asked dozens of times as in most forums.

  • But keep asking @pnet, we are here to help, even help make good use of the community.

  • Okay, you may not get the question what you answered, but I assure you, perhaps with rare exceptions that I post after trying. Sometimes I’ve asked questions at times of doubt, because I need to keep my job too and then the guy presses me and I sneeze, of course you have nothing to do with it. It is that in other forums I have never seen anyone complain about a user asking several questions. And when they look at the knowledge base, they will say. If it weren’t for @pnet........ rs

  • 3

    pnet Take what @bigown takes lightly. In a relaxed work environment this is a common joke when someone gets help. ;)

  • This is not a forum, it is a question and answer site.

  • Okay, you did well. You deserve half of my salary. Just give me, bank, agency and account, to make a Ted. But I can send you a Land Rover, which is half my salary and the price of it. Hey man, it may look bad, but don’t take my comment to the dark side of strength. Yesterday I was upset, but today, no hurt. I’m here for the programming and nothing else. Believe it or not, this is the past and let’s go to the questions, which I have plenty of. Maybe raise the percentage of my salary, rs.

  • pnet, managed to solve the creation of your table?

Show 5 more comments

3 answers

10


The Nth-Child pseudo-class selects elements from a tree of elements referring to the specific position of each one. You can for example select odd or even elements. 

tr:nth-child(2n+2) {
    background: #ccc;
}

The calculation used by Nth-Child is quite simple. You will most often use sum. Remember? The formula will be as follows: an+b.

The operation is as follows: the browser applies the style to each 2 tr.

You can make it easy, using the words Odd or Even, to select the odd or even elements of the tree.

tr:nth-child(odd) {
    background: #ccc;
}

If the value of a (an+b) is equal to 0, you do not need to put the formula, only the number referring to the order of the element. Example:

table tbody tr:nth-child(1) {
    background: #ccc;
}

source: CSS property: Nth-Child
Working example: jsfiddle

This selector has compatibility with the following browsers:

Desktop

  • Chrome - 1.0
  • Firefox (Gecko) - 3.5 (1.9.1)
  • Internet Explorer - 9.0
  • Opera - 9.5
  • Safari - 3.1

Mobile

  • Android - 2.1
  • Firefox Mobile (Gecko) - 1.0 (1.9.1)
  • IE Mobile - 9.0
  • Opera Mobile - 9.5
  • Safari Mobile - 3.1

  • put what you did so you could see what happened and be able to identify any possible mistake

  • Preferably, but if you post as a comment you can still follow 'logs' of discussion.

  • You don’t need this td, tr:nth-child(2n+2) { background: #ccc; } is enough, if you want to make a vertical zebra just change the tr by a td and it’ll stay that way td:nth-child(2n+2) { background: #ccc; }

  • Zebra vertical http://jsfiddle.net/cG3UK/2/

  • I removed the td from the answer, it could be causing conflict with some other style you had in your app

  • to zebrar the columns you use td:nth-child(2n+2) { background: #ccc; } and to zebrar the lines you use tr:nth-child(2n+2) { background: #ccc; }

  • 1

    As the question did not make clear whether the solution can be specific to CSS3 I find it pertinent to add the browsers that support these selectors.

  • It’s so mine and nothing. Class . tblGrid is the table I want zebrar. Not yet funnel.table.tblGrid { background:#fff; width:100%; } tr:Nth-Child(2n+2) { background:#ccc; }

  • tries to put like this .tblGrid tr:nth-child(2n+2) { background:#ccc; }

  • Nothing, I switched from class to id and still no zebra.

  • Man this is very strange, try to reproduce your scenario on http://jsfiddle.net, the only thing I can think of right now is that your monitor is glowing and so you’re not seeing the zebras...

  • @pnet managed to do?

Show 7 more comments

4

You have a few options. With CSS 3 you can use nth-child(even) and nth-child(odd) to reference the odd and even lines and cells within these lines. Then you would have the style to tr:nth-child(even) and analogously to the odd. See about this here.

Another solution is using jQuery: you can use the above constructions in jQuery to select the elements. Basically you would select $("table tr:nth-child(even)") and analogous to the odd also.

The solution with CSS 3 is more interesting (in my opinion) for maintaining the site/app style in CSS. The problem is that it will not work on older browsers that do not support the feature. In such cases, if it is a requirement for you to support older browsers the jQuery solution might be more interesting.

1

An Alternative and use jquery in your Voce project can use this way

function zebrar() {
    $('table th').css('background-color', 'green');
    $('table tbody tr:even').css('background-color', '#efe3e');
    $('table tbody tr:odd').css('background-color', 'silver');
}

simple and practical

Browser other questions tagged html css

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