"Untitled"
Bootstrap 4.1.1 Snippet by lingadharani

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/table.css"> <link rel="stylesheet" type="text/css" href="desktop/assignment/css/bootstrap.min.css"> <link rel=" stylesheet " href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T " crossorigin="anonymous "> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 " crossorigin="anonymous "></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin="anonymous "></script> </head> <body> <div class="container-fluid"> <div class="wrapper"> <div class="row"> <div class="col-md-10"> <div class="panel panel-primary"> <div class="panel-heading"> <h1 class="panel-title">USERS</h1> </div> <table class="table table-hover table-content"> <thead> <tr> <th scope="col">Picture</th> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Phone</th> <th scope="col">Comments</th> </tr> </thead> <tbody> <tr> <th scope="row"> <div class="eye"><img src="../images/eye.png"></div> </th> <td>Jane Doe</td> <td>jane.deo@f00.com</td> <td>01 800 2000</td> <td>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit. </td> </tr> <tr class="john" style="background-color: #F0F8FF;"> <th scope="row"> <div class="man"><img src="../images/blue.png"> </div> </th> <td>John Doe</td> <td>john.doe@foo.com</td> <td>01 800 2000</td> <td> Blanditis,aliquid numquam<br> pure voluptatibus ut maiores<br> explicable ducimus neque,<br> nesciunt rercum perferendis,<br> inventore <br> </td> </tr> <tr> <th scope="row"> <div class="girl"><img src="../images/girl.png"> </div> </th> <td>Jane Smith</td> <td>jane.smith@foo.com</td> <td>01 800 2000</td> <td> culpa praesentium unde<br> pariatur fugit eos<br> rescusandae voluptas </td> </tr> <tr style="background-color: #F0F8FF;"> <th scope="row"> <div class="gf"><img src="../images/old man.png"> </div> </th> <td>John Smith</td> <td>john.smith@foo.com</td> <td>01 800 2000</td> <td> Aut voluptatum<br> accusantium,eveniet <br> sapiente quaerat adipisci<br> consequatur maxime<br> temporibus quas,clolorem<br> impedit. </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </body> </html>
.container-fluid { background-color: aqua; width: 100%; height: 100%; } .wrapper { text-align: center; padding: 50px; } .wrapper table tbody tr td { text-align: justify; } .panel-heading { color: white; background-color: teal; border-top-left-radius: 10px; border-top-right-radius: 10px; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 30px; color: inherit; padding: 20px; font-weight: bold; letter-spacing: 1px; } .eye img { height: 70px; width: 70px; border-radius: 50px; } .man img { height: 70px; width: 70px; border-radius: 50px; margin-top: 30px; } .girl img { border-radius: 50px; width: 70px; height: 70px; } .gf img { border-radius: 50px; height: 70px; width: 70px; margin-top: 40px; } thead { background-color: #F0F8FF; } .row { padding-left: 170px; } .table-content tbody td { color: teal; vertical-align: middle; } .table thead { color: teal; } .table-content { background-color: white; } .panel-primary { border-color: teal; } .panel { margin-bottom: 20px; border: 1px solid teal; background-color: #ffffff; border-radius: 10px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .table-content tbody tr { font-weight: bold; }

Related: See More

Now UI Dashboard PRO

Questions / Comments: