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...

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
tr:nth-child(2n+1) {
    background-color:#fee;
 }
tr:nth-child(2n+2) {
    background-color:#eef;
 }
</style>
</head>
<body>
<table>
<tr>
<td>data cell</td><td>data cell</td>
</tr><tr>
<td>data cell</td><td>data cell</td>
</tr><tr>
<td>data cell</td><td>data cell</td>
</tr><tr>
<td>data cell</td><td>data cell</td>
</tr><tr>
<td>data cell</td><td>data cell</td>
</tr>
</table>
</body>
</html>

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 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.

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

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
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;
 }
</style>
</head>
<body>
<table class="stripable">
<caption>Sample text</caption>
<thead>
<tr>
 <th>Sample text 1</th>
 <th>Sample text</th>
 <th>Sample text</th>
</tr>
</thead>
<tbody>
<tr>
 <td>Sample text 2</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
<tr>
 <td>Sample text 3</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
<tr>
 <td>Sample text 4</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
<tr>
 <td>Sample text 5</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
<tr>
 <td>Sample text 6</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
<tr>
 <td>Sample text 7</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
</tbody>
<tfoot>
<tr>
 <td>Sample text 8</td>
 <td>Sample text</td>
 <td>Sample text</td>
</tr>
</tfoot>
</table>
</body>
</html>

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.