"awesome Table design"
Bootstrap 4.1.1 Snippet by csshint

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main-wrap"> <table class="table table-striped"> <thead> <tr> <th data-sort="name">Link Url</th> </tr> </thead> <tbody> <tr> <td><a href="https://www.hindipro.com/hindi-status/" target="_blank" title="Hindi status">Hindi status</a></td> </tr> <tr> <td><a href="http://www.hindipro.com/thakur-status-in-hindi-%E0%A4%A0%E0%A4%BE%E0%A4%95%E0%A5%81%E0%A4%B0-%E0%A4%B8%E0%A5%8D%E0%A4%9F%E0%A5%87%E0%A4%9F%E0%A4%B8/" target="_blank" title="Latest Thakur status in hindi – रॉयल ठाकुर स्टेटस">Latest Thakur status in hindi – रॉयल ठाकुर स्टेटस</a></td> </tr> <tr> <td><a href="https://bit.ly/2DZWEqP" target="_blank" title="Top 50+ Family Status in Hindi">Top 50+ Family Status in Hindi –</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/hindi-diwas-shayari/" target="_blank" title="हिंदी दिवस पर शायरी – Hindi Diwas Shayari in Hindi">हिंदी दिवस पर शायरी – Hindi Diwas Shayari in Hindi</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/ganesh-chaturthi-shayari/" target="_blank" title="गणेश चतुर्थी पर शायरी – Ganesh Chaturthi Shayari in Hindi">गणेश चतुर्थी पर शायरी – Ganesh Chaturthi Shayari in Hindi</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/funny-shayari/" target="_blank" title="Funny shayari in hindi – फनी हिंदी शायरी">Funny shayari in hindi – फनी हिंदी शायरी</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/romantic-shayari/" target="_blank" title="New romantic shayari – हिंदी में प्यार भरी रोमांटिक शायरी.">New romantic shayari – हिंदी में प्यार भरी रोमांटिक शायरी.</a></td> </tr> <tr> <td><a href="https://bit.ly/2OhmjA8" target="_blank" title="Badmashi Khatarnak Attitude Status – बदमाशी खतरनाक स्टेटस">Badmashi Khatarnak Attitude Status – बदमाशी खतरनाक स्टेटस</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/raksha-bandhan-shayari/ " target="_blank" title="Happy Raksha Bandhan Shayari and SMS in Hindi">Happy Raksha Bandhan Shayari and SMS in Hindi</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/happy-independence-day-shayari/" target="_blank" title="Happy Independence Day Shayari">Happy Independence Day Shayari</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/jija-sali-funny-jokes/" target="_blank" title="Jija Sali Funny Jokes Hindi">Jija Sali Funny Jokes Hindi</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/best-sharabi-jokes-in-hindi/" target="_blank" title="Best Sharabi Jokes in Hindi">Best Sharabi Jokes in Hindi</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/double-meaning-jokes/" target="_blank" title="Double Meaning Hindi Jokes">Double Meaning Hindi Jokes</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/nirmal-baba-funny-jokes/" target="_blank" title="Nirmal baba jokes">Nirmal baba jokes</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/funny-girlfriend-boyfriend-jokes/" target="_blank" title="Funny girlfriend boyfriend jokes">Funny girlfriend boyfriend jokes</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/good-morning-motivational-wishes/" target="_blank" title="101 Motivational Good Morning Messages">101 Motivational Good Morning Messages</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/motivational-quotes/" target="_blank" title="Top 50+ Motivational Quotes in Hindi">Top 50+ Motivational Quotes in Hindi</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/santa-banta-jokes-in-hindi/" target="_blank" title="Santa Banta hindi Jokes">Santa Banta hindi Jokes</a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/husband-wife-jokes-in-hindi/" target="_blank" title="Husband Wife Jokes in Hindi">Husband Wife Jokes in Hindi</a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="http://www.jokeswalebaba.com/teacher-student-jokes/" target="_blank" title="Teacher Student Jokes">Teacher Student Jokes</a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> <tr> <td><a href="#" target="_blank" title=""></a></td> </tr> </table> <div class="ftr">Design by <a href="http://www.csshint.com/">www.</a></div> </div>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500'); body{ background-color:#4FC3F7; overflow:hidden; font-family: 'Raleway', sans-serif; } .main-wrap{ padding:3%; max-width:1200px; display:block; margin: 10px auto; } .table.table-striped { width:100%; border-collapse: collapse; background: #fff; overflow: hidden; box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15); } .table.table-striped thead { background: #fff; box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1); } .table.table-striped th { padding: 0.9rem 0.5rem; font-weight: bold; border: 1px solid #efefef; text-align: left; border-top: 0px; } .table.table-striped tbody tr:nth-child(odd){ background-color: rgba(0,0,0,.02); } .table.table-striped tbody tr td a { color: #3c2f17; font-size: 15px; text-decoration:none; font-weight:500; } .table.table-striped tr:nth-child(even) { background-color: #fff; } .table.table-striped tbody tr td { border: 1px solid #efefef; padding: 0.7rem; text-align: left; border-top: 0px; } .ftr{ text-align: center; margin-top: 20px; font-weight: bold; } .ftr a{ color: #fff; }

Related: See More


Questions / Comments: