"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://csshint.com/css-animated-backgrounds/" target="_blank">Top 20 CSS Animated Backgrounds </a></td> </tr> <tr> <td><a href="https://csshint.com/logo-with-typography/" target="_blank">30 Examples of logo with typography for Inspiration and Ideas </a></td> </tr> <tr> <td><a href="https://csshint.com/top-5-wordpress-seo-friendly-themes/" target="_blank"> Top 5 WordPress SEO friendly and fast loading themes for Blog</a></td> </tr> <tr> <td><a href="https://csshint.com/animated-gradient-examples/" target="_blank">Top 18 CSS Animated Gradient Examples </a></td> </tr> <tr> <td><a href="https://csshint.com/jquery-carousel/" target="_blank">Top 10 : jQuery Carousel </a></td> </tr> <tr> <td><a href="https://csshint.com/popular-css-code-snippet-october-2019/" target="_blank">10+ Freshest Popular and useful CSS Code Snippet, October 2019 </a></td> </tr> <tr> <td><a href="https://csshint.com/jquery-password-strength-meter/" target="_blank">Top 18+ : jQuery Password Strength Meter </a></td> </tr> <tr> <td><a href="https://csshint.com/free-stock-video-sites/" target="_blank">Top 10 : Free Stock Video Sites </a></td> </tr> <tr> <td><a href="https://csshint.com/logos-with-hidden-meanings/" target="_blank"> Designer Challenges : Top 30 Logos With Hidden Meanings</a></td> </tr> <tr> <td><a href="https://csshint.com/html-css-chat-box-designs/" target="_blank">Top 18+ HTML CSS Chat Box Designs </a></td> </tr> <tr> <td><a href="http://www.csshint.com/material-design-card-ui/" target="_blank">16+ best Free HTML5/CSS3 material design card UI for your inspiration.</a></td> </tr> <tr> <td><a href="http://www.csshint.com/21-amazing-modern-photoshop-text-effects-tutorials/" target="_blank">21+ Amazing Modern Photoshop Text Effects Tutorials</a></td> </tr> <tr> <td><a href="http://www.csshint.com/breadcrumb-css-snippets/" target="_blank">18+ Free Breadcrumb CSS Snippets For your next Projects</a></td> </tr> <tr> <td><a href="http://www.csshint.com/beautiful-css3-buttons/" target="_blank">Beautiful css3 buttons with hover effects</a></td> </tr> </table> <div class="ftr">Design by <a href="http://www.csshint.com/" target="_blank">www.csshint.com</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: