"Table with Descriptive & Muted Text/Description in same column"
Bootstrap 4.1.1 Snippet by adriano3429

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> </head> <body> <div class="container"> <div class="row"> <table class="table table-hover table-striped"> <thead> <tr class="thead-dark"> <th>S. #</th> <th>Title & Discription</th> <th>Another Header</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td> 01 </td> <td style="max-width:300px"> <h6>Dummy Title 01</h6> <em class="text-muted"> This is some long text or discription regarding Dummy Title 01. Even more lenghthy description will be automatically adjusted as per the width specified. </em> </td> <td> Column data </td> <td> <a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> | <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a> </td> </tr> <tr> <td> 02 </td> <td style="max-width:300px"> <h6>Dummy Title 02</h6> <em class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique facere necessitatibus quo laboriosam consequuntur </em> </td> <td> Some Data </td> <td> <a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> | <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a> </td> </tr> <tr> <td> 03 </td> <td style="max-width:300px"> <h6>Another Title</h6> <em class="text-muted"> This is some long text or discription about Another Title or else about. </em> </td> <td> This is some data </td> <td> <a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> | <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a> </td> </tr> <tr> <td> 04 </td> <td style="max-width:300px"> <h6>Yet Another Title</h6> <em class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi aliquam placeat odit quasi autem distinctio veritatis ex numquam nihil nulla tempora a dolorem omnis beatae facilis perspiciatis doloribus </em> </td> <td> Data goes here </td> <td> <a href="#" class="btn btn-warning"><i class="fas fa-edit"></i></a> | <a href="#" class="btn btn-danger"><i class="fas fa-trash"></i></a> </td> </tr> </tbody> </table> </div> </div> </body> </html>

Related: See More


Questions / Comments: