Table striping?

Have googled etc, but seem to be getting confused. Does anyone know how to do it, so that table rows automatically colour / stripe, without any js please? Even when deleting or adding rows?

Any help much appreciated.

Dez.

Hi there Dez,

does this help…

[code]

untitled document tr:nth-child(2n+1) { background-color:#fee; } tr:nth-child(2n+2) { background-color:#eef; }
data celldata cell
data celldata cell
data celldata cell
data celldata cell
data celldata cell
[/code]

coothead

Or just:

tr {background-color:#eef;}
tr:nth-child(odd) {background-color:#fee;}

:smile:

Hi there PaulOB,

you, obviously, are not as pedantic as me. :smile:

Succinctness, has never been my forte. :confused:

coothead

I have my moments :smile:

As usual, getting great help here guys. Thanks. Just wondering how I can adjust things?
HTML:

<table class="stripable" summary="Sample text">
<caption>Sample text</caption>
<thead>
<tr>
<th width="13px">Sample text</th>
<th width="315px">Sample text</th>
<th width="288px">Sample text</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
<tr>
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
</tr>
</tbody>
</table>

CSS:

.stripable {
border:1px solid #fff;
border-color:#fff;
border-collapse:separate;
margin-top:1px;
margin-bottom:2px;
padding:0;
vertical-align:bottom;
width:100%;
}
.stripable caption {
margin:4px 0 6px 0;
padding:8px 0 6px 0;
}
.stripable tbody tr td {
font-size:15px;
margin-top:0;
margin-bottom:1px;
padding:10px 5px 10px 5px;
vertical-align:top;
border-collapse:separate;
border-color:#fff;
border:medium;
}
.stripable .center {
text-align:center;
}
.stripable tfoot tr td {
border-collapse:separate;
border-color:#fff;
border:medium;
font-size:15px;
padding:5px 6px 7px 6px;
text-align:center;
vertical-align:top;
}
.stripable thead tr th {
border-collapse:separate;
border-color:#fff;
border:medium;
font-size:15px;
padding:7px 6px 5px 6px;
text-align:center;
vertical-align:bottom;
}

Did you not understand their advice? They gave pretty clear answers; the code is there :slight_smile: .

I would have thought it pretty obvious really, if I understood it, I wouldn’t have asked!

Step 1: Take your mouse, and copy code.
Step 2: Paste in your CSS file
Step 3: ???
Step 4: Profit

Ryan, if it were a simple case of copying and pasting, I’m sure I could manage that!! Not sure about the profit bit though?!? You can’t just put that css in any old place.

That’s the thing though - it really is. See below.

http://codepen.io/ryanreese09/pen/WvxwOG

Look at the CSS tab at the bottom. I took your HTML, and your CSS. Then I added in the code that Paul provided. I copy and pasted it in. Striped rows were the result…

Okay, thanks, will try it, just not used to just sticking css just anywhere I want, usually has to go within the attributes of the parent somewhere, but no worries, I’ll give it a go. I just wish you would chill dude. We were all newbies once!

No…CSS is not like that. The only way that CSS would care what order, is if you have selectors which have the same specificity, and are trying to override each others styles. Usually not the case.

Perhaps you are thinking of SASS or LESS, which is not CSS. It’s a bastardized version of CSS, where you can nest selectors. I’m guessing you meant that.

Hi there Ryan,

have you noticed that the first two rows in your example
appear to share the same background-color? :open_mouth:

coothead

It’s not MY example. Just taken code from others in this thread :wink: . Well ok technically it is, but I’ll look into why that is now…

Alright basically since some rows are separated by thead/tbody, the nth-child resets. So the one element in thead counts as its own nth-child…And then you move onto tbody with a new nth-child set.

Hi there Dez,

here is your code, with just a modicum of modification. :mask:

[code]

untitled document body { background-color:#666; font-size:100%; } .stripable { width:100%; border:1px solid #fff; margin:1px 0 2px; } .stripable caption { padding:12px 0; color:#fff; } .stripable tr:nth-child(odd), .stripable tbody tr:nth-child(2n+2) { background-color:#fee; } .stripable tr,.stripable tbody tr:nth-child(odd), .stripable tfoot tr:nth-child(odd){ background-color:#eef; } .stripable th,.stripable td { border:2px solid #fff; font-size:95%; padding:10px 5px ; } .stripable tfoot { text-align:center; } Sample text
Sample text 1 Sample text Sample text
Sample text 2 Sample text Sample text
Sample text 3 Sample text Sample text
Sample text 4 Sample text Sample text
Sample text 5 Sample text Sample text
Sample text 6 Sample text Sample text
Sample text 7 Sample text Sample text
Sample text 8 Sample text Sample text
[/code]

coothead

1 Like

It does seem a shame not to join the party…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alt colored table rows</title>
    <style media="screen">
body {
    background-color:#666;
    font-size:100%;
}
.striped {
    width:100%;
    border:1px solid #fff;
    margin:1px 0 2px;
}
.striped caption {
    padding:12px 0;
    color:#fff;
}
.striped th,.striped td {
    border:2px solid #fff;
    font-size:95%;
    padding:10px 5px;
}
.striped thead th {
    color:#fff;
    background-color:#a52a2a;
}
.striped tfoot td {
    background-color:#fbb;
    text-align:center;
}
.striped tbody td {
    background-color:#eef;
}
.striped tbody tr:nth-child(odd) td {
    background-color:#fee;
}
    </style>
</head>
<body>
<table class="striped">
    <caption>caption text</caption>
    <thead>
        <tr>
            <th>thead sample text</th>
            <th>thead sample text</th>
            <th>thead sample text</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>tfoot sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>tbody row1 sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
        <tr>
            <td>tbody row2 sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
        <tr>
            <td>tbody row3 sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
        <tr>
            <td>tbody row4 sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
        <tr>
            <td>tbody row5 sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
        <tr>
            <td>tbody row6 sample text</td>
            <td>Sample text</td>
            <td>Sample text</td>
        </tr>
    </tbody>
</table>
</body>
</html>
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.