<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1>CSS TABS</h1> <ul class=tabs> <li> <input type=radio name=tabs id=tab1 checked> <label for=tab1>Sales</label> <div id=tab-content1 class=tab-content> <table> <tr> <th> Day </th> <th> Open </th> <th> Closed </th> </tr> <tr> <td>Monday — Saturday</td> <td>8:30 AM</td> <td>8:00 PM</td> </tr> <tr> <td>Sunday</td> <td>Closed</td> <td>Closed</td> </tr> </table> </div> </li> <li> <input type=radio name=tabs id=tab2> <label for=tab2>Parts</label> <div id=tab-content2 class=tab-content> <table> <tr> <th> Day </th> <th> Open </th> <th> Closed </th> </tr> <tr> <td>Monday — Saturday</td> <td>7:30 AM</td> <td>8:00 PM</td> </tr> <tr> <td>Sunday</td> <td>Closed</td> <td>Closed</td> </tr> </table> </div> </li> <li> <input type=radio name=tabs id=tab3> <label for=tab3>Service</label> <div id=tab-content3 class=tab-content> <table> <tr> <th> Day </th> <th> Open </th> <th> Closed </th> </tr> <tr> <td>Monday — Saturday</td> <td>6:30 AM</td> <td>8:00 PM</td> </tr> <tr> <td>Sunday</td> <td>Closed</td> <td>Closed</td> </tr> </table> </div> </li> </ul> <br style=clear:both;> </div> </div>

* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 20px; color: #333; background: #eee; } h1 { font-weight: normal; font-size: 40px; margin: 20px 0 100px 10px; } .tabs { width: 390px; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; } .tabs li { float: left; display: block; width: 33.33%; margin-right: 0; text-align: center; } .tabs li:first-child { border-right: 1px solid #3d94ff; height: 50px; margin-bottom: -40px; } .tabs li:last-child { border-left: 1px solid #3d94ff; height: 50px; margin-bottom: -40px; } .tabs input[type="radio"] { position: absolute; top: -9999px; left: -9999px; } .tabs label { color: #fff; display: block; padding: 14px 21px; border-radius: 0 0 0 0; font-size: 20px; background: #0072FF; cursor: pointer; position: relative; top: 4px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs [id^="tab"]:checked + p { color: #000; -moz-transition: all 2.2s ease-in-out; -o-transition: all 2.2s ease-in-out; -webkit-transition: all 2.2s ease-in-out; transition: all 2.2s ease-in-out; } .tabs label:hover { background: #3d94ff; color: #fff; } .tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: #fff; } .tabs [id^="tab"]:checked + label { background: #fff; color: #000; } .tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block; } table { width: 100%; border-spacing: 8px; } th { text-align: center; background: #0072ff; color: #fff; } td { background: #f7f7f7; } th, td { border: 0; padding: 7px; }