0
Welcome Guest! Login
0 items Join Now

Table with different color for even or odd rows

Last Post
Search Topic
    • Ghyslain's Avatar
    • Ghyslain
    • Jr. Rocketeer
    • Posts: 38
    • Thanks: 0

    Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • Hello, i want to have tables in content with different colors for odd or even rows.
      These tables will be coming from DB or from client.

      I saw many codes out there put not working in Joomla! or don't want to mess up things.
      should work in CSS?

      thanks for looking and for your solution.
    #245421
    • Yves's Avatar
    • Yves
    • Preeminent Rocketeer
    • Posts: 9214
    • Thanks: 5

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    #245497
    • Ghyslain's Avatar
    • Ghyslain
    • Jr. Rocketeer
    • Posts: 38
    • Thanks: 0

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • thanks for the link. i can make it in CSS no prob. just that i was looking for an automated way of applying the css to the rows.
      If client wants to add a row, it will change css by itself.
    #245560
    • Terp's Avatar
    • Terp
    • Elite Rocketeer
    • Posts: 1720
    • Thanks: 23

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • I use two different styles to accomplish this on some of my forms (as does the article Yves linked: i.e., td vs td.alt):
       
.oddRow0 {
     background-color: #FAFAFA;
}
 
.oddRow1 {
     background-color: #Efefef;
}
    #245617
    • Ghyslain's Avatar
    • Ghyslain
    • Jr. Rocketeer
    • Posts: 38
    • Thanks: 0

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • thanks for the reply
      i used it too and added this:

      .oddRow0 {
      background-color: #FAFAFA;
      }

      .oddRow1 {
      background-color: #Efefef;
      }
      .oddRow0:hover {
      background-color: #EFEFEF;
      }

      .oddRow1:hover {
      background-color: #FAFAFA;
      }

      could i use this script as found on this page? did not work for me...
      http://www.chronoengine.com/forums/viewtopic.php?f=12&t=11381

      thanks
    #245653
    • Terp's Avatar
    • Terp
    • Elite Rocketeer
    • Posts: 1720
    • Thanks: 23

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • You have classes setup for the oddRow in whatever is generating your table? You would assign these classes to your table row elements. So if the oddrow is 1 it applies the .oddRow1 nonsense, so on and so forth. ;)


      You have a link to your form? ;)
    #245657
    • Ghyslain's Avatar
    • Ghyslain
    • Jr. Rocketeer
    • Posts: 38
    • Thanks: 0

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • sorry messed up the code...saw that after the post... :-\

      should have beed odd and even rows.

      i.e: in Joomla! back admin when you take a look at the modules section. you can clearly see the table with white and light silver rows.
      how can we achieve that effect?
    #245701
    • Yves's Avatar
    • Yves
    • Preeminent Rocketeer
    • Posts: 9214
    • Thanks: 5

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • In backend, this is created by this code in general.css:

      white line:

      table.adminlist tbody tr td {
      height: 25px;
      background: #fff;
      border: 1px solid #fff;
      }

      grey line:

      table.adminlist tbody tr.row1 td {
      background: #f9f9f9;
      border-top: 1px solid #fff;
      }
    • Yves
    #245764
    • Ghyslain's Avatar
    • Ghyslain
    • Jr. Rocketeer
    • Posts: 38
    • Thanks: 0

    Re: Table with different color for even or odd rows

    Posted 16 years 5 months ago
    • cool, but there must be a script or something in PHP that gives the right css code to the appropriate row.

      i believe i'll do everything by hand,longer but will do the job.


      thanks all for the replies.
    #245819

Time to create page: 0.128 seconds