working on it ...

Filters

Explore Public Snippets

Sort by

Found 1 snippet matching: "css zebra color"

    public by lbottaro  352483  5  7  7

    Css zebra color for alternate style in table rows

    This simple code shows how to alternate the style of each row in a table. tr:nth-child(even) or tr:nth-child(odd) operators help in switching style automatically for each row item in a table.
    <html>
    	<head>
    		<title>
             Example of zebra color
    		</title>
    		<style>	
    
    		tr:nth-child(even) {
      background-color: red;
    }
    
    
    tr:nth-child(odd) {
      background-color: white;
    }
    		</style>
            
    	</head>
    	<body>
    
    		<table id="myTable">
    			<th>Lorem ipsum dolor.</th>
    			<th>Nam, sequi, architecto?</th>
    			<th>Aut, eius, esse!</th>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Doloribus, quidem, excepturi.</td>
    				<td>Magnam, dolorum, alias!</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Odio, fuga, distinctio.</td>
    				<td>Cumque, necessitatibus, labore!</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Esse, suscipit, soluta.</td>
    				<td>Nostrum, animi, fugit?</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Error, veritatis, saepe?</td>
    				<td>Alias, cupiditate, debitis.</td>
    			</tr>
    			<tr >
    				<td>Lorem ipsum dolor.</td>
    				<td>Minus, neque, quisquam.</td>
    				<td>Eius, deleniti, sunt.</td>
    			</tr>
    		</table>
    
    		
    	</body>
    </html>
    

    List Complete ( 1 snippet total )

    Cannot find what you were looking for?
    Ask the Snip2Code Community

    • Public Snippets
    • Channels Snippets