<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>
<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>
