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