HTML CSS examples for CSS Widget:Table
Rearrange the Table Data with CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .test {<!--from w ww. java 2 s . c o m--> width:100%; } .test td { display:inline-block; float:right; text-align:left; width:51%; } .odd, .even { background-color:Chartreuse; border:2px solid yellow; border-radius:4px; display:inline-block; float:left; height:126px; margin-left:2.6%; margin-top:2.6%; width:31%; } </style> </head> <body> <table class="test"> <tbody> <tr class="odd"> <td>L</td> <td>Lore</td> <td>Lorem </td> <td>Lorem ipsum</td> </tr> <tr class="even"> <td>L</td> <td>Lore</td> <td>Lorem </td> <td>Lorem ipsum</td> </tr> <tr class="odd"> <td>L</td> <td>Lore</td> <td>Lorem </td> <td>Lorem ipsum</td> </tr> <tr class="even"> <td>L</td> <td>Lore</td> <td>Lorem </td> <td>Lorem ipsum</td> </tr> </tbody> </table> </body> </html>