"Table with Descriptive & Muted Text/Description in same column"
Bootstrap 4.0.0 Snippet by tieusuquay79

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> </head> <body> <div class="container"> <div class="row"> <table class="table table-hover table-striped events-table"> <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 class="events-desc"> <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> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </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>
.events-desc { max-width: 300px; }

Questions / Comments: