Support striped rows in tables

What problem does this feature solve?

When you have a lot of data in a table, it’s easy to skip between rows while reading across the line, so lots of places colour every other row (or every nth row) to make it clearer. Here are [some examples](https://www.google.com/search?tbm=isch&q=striped table rows).

What does the proposed API look like?

Perhaps a new string property on the Table API to allow every nth row to be striped using the same selectors as the CSS nth-child selectors:

• stripes=even - use the stripe colour for rows 2, 4, 6, …
• stripes=odd - use the stripe colour for rows 1, 3, 5, …
• stripes=4 - use the stripe colour on row 4
• stripes=4n - use the stripe colour on every fourth row: 4, 8, 12, …
• stripes=4n 2 - use the stripe colour on every fourth row, starting with the second row: 2, 6, 10, …
• stripes=-n 2 - use the stripe colour on the first two rows: 1, 2

[Evanlai8]

I think the proposed is useful

[shaahiiin]

I found two ways to do this as of now:

One way is to use rowClassName prop of Table:

.table-row-light {
    background-color: #ffffff;
}
.table-row-dark {
    background-color: #fbfbfb;
}

<Table
  rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' :  'table-row-dark'}
  columns={columns}
  dataSource={dataSource}
  loading={loading}
/>

Second way is to use plain CSS

.table-striped-rows tr:nth-child(2n) td {
    background-color: #fbfbfb;
}
.table-striped-rows thead {
    background-color: #f1f1f1;
}

<Table
  className="table-striped-rows"
  columns={columns}
  dataSource={dataSource}
  loading={loading}
/>

Note that rowClassName works only for rows, so for CSS on table headers we can only use plain CSS like above.