Striped table (fix for Bootstrap)

by Artūrs Jansons

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<body class="container">
    <h3>Striped table:</h3>

    <table class="table table-striped1">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="error">
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr class="error">
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr class="warning">
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr class="warning">
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="info">
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
          ...

CSS

body {
    background: linear-gradient(90deg, #666 50%, #eee 50%);
}
/* custom color and image */
 .custom {
    background-color: rgba(255, 128, 192, .5)!important;
    background-image: linear-gradient(45deg, rgba(128, 128, 128, .5) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .5) 75%, rgba(128, 128, 128, .5)), linear-gradient(45deg, rgba(128, 128, 128, .5) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .5) 75%, rgba(128, 128, 128, .5));
    background-size: 20px 20px;
    background-position: 0 0, 30px 30px;
}
/* Fix for Bootstrap */
[class*='-striped'] tr:nth-child(odd) {
    background-color: rgba(128, 128, 128, .1);
}
[class*='-striped'] th:nth-child(odd), [class*='-striped'] tr:nth-child(odd) {
    -webkit-filter: brightness(.5) brightness(1.5);
    -moz-filter: brightness(.5) brightness(1.5);
    -o-filter: brightness(.5) brightness(1.5);
    filter: brightness(.5) brightness(1.5);
}