HTML CSS examples for CSS Widget:Table Row
Use UL as table row
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul.steps {<!-- w ww. j av a 2s. c o m--> margin:0 0 .5em; } ul.steps li { float:left; display:block; background:#f7f7f7 url('https://www.java2s.com/style/demo/Safari.png') no-repeat 0 -22px; padding:3px 19px 3px 30px; height:16px; line-height:16px; vertical-align:middle; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-size:.8em; color:#444; } ul.steps li:first-child { padding-left:25px; background-image:none; border-left:1px solid #ccc; } ul.steps li:last-child { padding-right:25px; border-right:1px solid #ccc; } .steps li:hover, .steps .selected { background-color:#e3eff6; } .steps li:hover + li, .steps .selected + li { background-position:0 0 ; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style> </head> <body> <ul class="steps clearfix"> <li class="selected">Step 1</li> <li>Step 2</li> <li>Step 3</li> <li>Step 4</li> <li>Step 5</li> </ul> <ul class="steps clearfix"> <li>Step 1</li> <li class="selected">Step 2</li> <li>Step 3</li> <li>Step 4</li> <li>Step 5</li> </ul> <ul class="steps clearfix"> <li>Step 1</li> <li>Step 2</li> <li class="selected">Step 3</li> <li>Step 4</li> <li>Step 5</li> </ul> <ul class="steps clearfix"> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> <li class="selected">Step 4</li> <li>Step 5</li> </ul> <ul class="steps clearfix"> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> <li>Step 4</li> <li class="selected">Step 5</li> </ul> </body> </html>