"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/happy-birthday-images/" target="_blank">100+ Free Happy Birthday Images & Pictures </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/lord-shiva-images/" target="_blank">100+ Lord shiva images hd wallpapers </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/inspirational-quotes/" target="_blank">100 Inspirational Quotes to Inspire You to Be Successful </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/valentines-day-images/" target="_blank"> 1000+ Valentine’s Day images, photos and pictures In HD</a></td> </tr> <tr> <td><a href="https://www.hindipro.com/happy-valentines-day-quotes/" target="_blank">2020 Happy Valentines Day Quotes, saying for Lover, Friends </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/motivational-images/" target="_blank"> Best 100+ motivational images with Quotes</a></td> </tr> <tr> <td><a href="https://www.hindipro.com/good-night-images-for-lover/" target="_blank">Top 50+ good night images for lover </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/lord-krishna-images/" target="_blank">Best 100+ Lord Krishna Images | God Krishna Images download </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/whatsapp-dp/" target="_blank">WhatsApp DP 2020 ! DP For WhatsApp </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/sad-dp/" target="_blank">Sad DP for Whatsapp, fb Profile Picture </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/durga-chalisa-lyrics/" target="_blank">Maa Durga Chalisa Lyrics : श्री दुर्गा चालीसा </a></td> </tr> <tr> <td><a href="https://www.hindipro.com/hanuman-chalisa-hindi-lyrics/" target="_blank">Hanuman Chalisa in Hindi Lyrics (श्री हनुमान चालीसा)चालीसा </a></td> </tr> <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: