- Skip to main content
- Skip to footer

# Zebra striping

- Documentation
- Questions or comments?

- Table examples
- List examples
- Other examples
  - Simple Table
  - Simple Grouping Table
  - Column Highlight Table
  - Table Mouse Hover Effect
  - Table Mouse Hover Effect with Row Group
  - Invoice Table
  - Row Level with Summary Table

## Table examples

### Default table appearance

Example 1
Header | Header
--- | ---
Data | Data
Data | Data
Data | Data
Data | Data
Data | Data
Data | Data

Example 2
1 | 2 | 3
--- | --- | ---
A | - | -
B | - | -
C | - | -

### Tables with `wet-boew-zebra` class

Example 1
Header | Header
--- | ---
Data | Data
Data | Data
Data | Data
Data | Data
Data | Data
Data | Data

Example 2
1 | 2 | 3
--- | --- | ---
A | - | -
B | - | -
C | - | -

### Tables with `wet-boew-zebra` and `table-accent` classes

Example 1
Header | Header
--- | ---
Data | Data
Data | Data
Data | Data
Data | Data
Data | Data
Data | Data

Example 2
1 | 2 | 3
--- | --- | ---
A | - | -
B | - | -
C | - | -

## List examples

### Default list appearance

1. Jessica
   November 19, 2009
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
   1. Brian
      November 19, 2009
      Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
      1. Elizabeth
         November 19, 2009
         Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
      2. Chris
         November 19, 2009
         Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
   2. Laura
      November 19, 2009
      Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
2. Mihn
   November 19, 2009
   Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
3. Eddie
   November 19, 2009
   Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.
   1. Bob
      November 19, 2009
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Sarah
   November 19, 2009
   Donec iaculis diam eget sem bibendum consequat.

### Default list appearance

- Jessica
  November 19, 2009
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
  - Brian
    November 19, 2009
    Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
    - Elizabeth
      November 19, 2009
      Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
    - Chris
      November 19, 2009
      Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
  - Laura
    November 19, 2009
    Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
- Mihn
  November 19, 2009
  Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
- Eddie
  November 19, 2009
  Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.
  - Bob
    November 19, 2009
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Sarah
  November 19, 2009
  Donec iaculis diam eget sem bibendum consequat.

### Ordered List with `wet-boew-zebra` class

1. Jessica
   November 19, 2009
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
   1. Brian
      November 19, 2009
      Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
      1. Elizabeth
         November 19, 2009
         Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
      2. Chris
         November 19, 2009
         Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
   2. Laura
      November 19, 2009
      Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
2. Mihn
   November 19, 2009
   Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
3. Eddie
   November 19, 2009
   Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.
   1. Bob
      November 19, 2009
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Sarah
   November 19, 2009
   Donec iaculis diam eget sem bibendum consequat.

### Ordered List with `wet-boew-zebra` and `module-comment` class

1. Jessica
   November 19, 2009
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
   1. Brian
      November 19, 2009
      Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
      1. Elizabeth
         November 19, 2009
         Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
      2. Chris
         November 19, 2009
         Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
   2. Laura
      November 19, 2009
      Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
2. Mihn
   November 19, 2009
   Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
3. Eddie
   November 19, 2009
   Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.
   1. Bob
      November 19, 2009
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Sarah
   November 19, 2009
   Donec iaculis diam eget sem bibendum consequat.

### Unordered List with `wet-boew-zebra` and `alterwg` class

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
- Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
- Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
- Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
- Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
- Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
- Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.

### Unordered List with `wet-boew-zebra`, `alterwg` and `nohover` class

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
- Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
- Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
- Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
- Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
- Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
- Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.

### Default definition list appearance

Item A
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
Item B
  Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
Item C
  Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
Item D
  Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
  Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
Item E
  Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
  Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.

### Definition list with `wet-boew-zebra`

Item A
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum massa quis velit rutrum commodo.
Item B
  Duis dictum lacus ac turpis gravida in interdum mauris adipiscing. Mauris leo lorem, lobortis eu malesuada a, molestie sed eros.
Item C
  Vestibulum et dui ut velit dictum iaculis. Curabitur auctor viverra rutrum. Quisque id quam urna. Mauris quis urna in leo accumsan ultricies vitae sit amet felis.
Item D
  Ut vel risus tellus. Suspendisse potenti. Sed est urna, venenatis at auctor eu, vulputate bibendum sem.
  Aliquam erat volutpat. Maecenas aliquam dignissim urna nec viverra. Nulla fringilla fringilla orci, eget consectetur massa vulputate in. Morbi consectetur aliquam lacus, nec sollicitudin lorem molestie ut. Pellentesque scelerisque nulla eget mauris eleifend ac rutrum ligula scelerisque.
Item E
  Aenean id elit in metus consectetur bibendum non at massa. Phasellus dictum varius nibh vel scelerisque. Curabitur sollicitudin purus urna, ac ullamcorper magna.
  Phasellus accumsan risus id lacus cursus vitae fringilla sapien pulvinar. Duis viverra consectetur quam vitae pellentesque. Donec iaculis diam eget sem bibendum consequat. Nullam rhoncus bibendum lobortis. Sed consequat sagittis pharetra. Pellentesque accumsan, felis ut venenatis semper, metus odio sollicitudin libero, nec vestibulum lectus nibh vel libero. Fusce iaculis lectus vel ipsum auctor porta. Proin nec lectus augue, varius cursus orci.

### Special Note

The class `alterwg` and `nohover` can be applied to unordered (ul), ordered (ol) and definition list (dl).

Prior to WxT 3.0.3 the class `nomargin` can be used to remove the default margin

Date modified:
  2013-04-11