"Untitled"
Bootstrap 4.1.1 Snippet by Hasanshali

<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="container"> <div class="row"> <table id="customers"> <tr> <th>Column Title 1</th> <th>Column Title 2</th> <th>Column Title 3</th> <th>Column Title 3</th> </tr> <tr> <td> <div class="row" > <div class="col-sm-7"> <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit </a> </div> <div class="col-sm-5"><img src="https://www.ttiinc.com/content/ttiinc/en/manufacturers/k-o/littelfuse/products/voltage-monitoring-relays/_jcr_content/centerParsysOne/bootstrapcolumn/uniqueParsysName/staticimage.img.png/1572288242891.png" class="img-thumbnail"></div> </div> </td> <td><a>Aliquam ac pulvinar augue, a consequat augue. Nulla nec risus ullamcorper, hendrerit ante vel, dapibus sem. Vestibulum ac volutpat magna, quis egestas sapien.</a></td> <td><a>Nam vel mollis justo. Proin nec mauris venenatis, vulputate eros et, sollicitudin est. Curabitur commodo est varius volutpat efficitur. Proin euismod, nibh sit amet ullamcorper interdum, quam nunc eleifend quam, et mattis tortor mauris et ligula. Donec aliquet congue diam id condimentum. </a></td> <td><a target="_blank" href="https://www.littelfuse.com/">www.littelfuse.com</a></td> </tr> <tr> <td> <div class="row" > <div class="col-sm-7"> <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit </a> </div> <div class="col-sm-5"><img src="https://www.ttiinc.com/content/ttiinc/en/manufacturers/k-o/littelfuse/products/voltage-monitoring-relays/_jcr_content/centerParsysOne/bootstrapcolumn/uniqueParsysName/staticimage.img.png/1572288242891.png" class="img-thumbnail"></div> </div> </td> <td><a>Aliquam ac pulvinar augue, a consequat augue. Nulla nec risus ullamcorper, hendrerit ante vel, dapibus sem. Vestibulum ac volutpat magna, quis egestas sapien.</a></td> <td><a>Nam vel mollis justo. Proin nec mauris venenatis, vulputate eros et, sollicitudin est. Curabitur commodo est varius volutpat efficitur. Proin euismod, nibh sit amet ullamcorper interdum, quam nunc eleifend quam, et mattis tortor mauris et ligula. Donec aliquet congue diam id condimentum. </a></td> <td><a target="_blank" href="https://www.littelfuse.com/">www.littelfuse.com</a></td> </tr> <tr> <td> <div class="row" > <div class="col-sm-7"> <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit </a> </div> <div class="col-sm-5"><img src="https://www.ttiinc.com/content/ttiinc/en/manufacturers/k-o/littelfuse/products/voltage-monitoring-relays/_jcr_content/centerParsysOne/bootstrapcolumn/uniqueParsysName/staticimage.img.png/1572288242891.png" class="img-thumbnail"></div> </div> </td> <td><a>Aliquam ac pulvinar augue, a consequat augue. Nulla nec risus ullamcorper, hendrerit ante vel, dapibus sem. Vestibulum ac volutpat magna, quis egestas sapien.</a></td> <td><a>Nam vel mollis justo. Proin nec mauris venenatis, vulputate eros et, sollicitudin est. Curabitur commodo est varius volutpat efficitur. Proin euismod, nibh sit amet ullamcorper interdum, quam nunc eleifend quam, et mattis tortor mauris et ligula. Donec aliquet congue diam id condimentum. </a></td> <td><a target="_blank" href="https://www.littelfuse.com/">www.littelfuse.com</a></td> </tr> </table> </body> </html> </div> </div>
#customers { font-family: "OpenSans-Regular"; border-collapse: collapse; font-size:11px; } #customers td, #customers th { border: 2px solid #ddd; padding: 10px; } #customers tr:nth-child(even){background-color: #f2f2f2;} #customers tr:hover {background-color: #ddd;} #customers th { padding-top: 10px; padding-bottom: 10px; text-align: left; background-color: #999999; color: white; } #customers td{ width:232px; vertical-align: top; } .img-thumbnail{ max-width: 100%; height:68px; }

Related: See More


Questions / Comments: