Bootstrap Table Row Going outside - html

Question

I have a simple table in my Codeigniter site like below
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Image</th>
<th>Username</th>
<th>Comment</th>
<th>Action</th>
</tr>
</thead>
<tbody id="ajax_table">
</tbody>
</table>
and I am displaying row like below
public function getComment(){
$page = $_GET['page'];
$user_id =$_GET['user_id'];
// $data['comments'] = $this->member->get_all_comment($user_id);
$comments = $this->member->get_all_comment($page,$user_id);
$html='';
if(isset($comments) && count($comments)>0){
foreach($comments as $comment){
if($comment->image ==""){
$image = "https://granboardonline.com/uploads/empty.jpg";
}
else {
$image = "https://granboardonline.com/uploads/".$comment->image;
}
$html.= "<tr><td>".$comment->date_created."</td><td> <img src= $image style='width:50px;height:50px;'> </td><td>".$comment->fname."</td><td>".$comment->comment."</td>";
if($this->session->userdata('user_id')==$comment->reciver_id || $this->session->userdata('user_id')==$comment->sender_id){
$html.="<td><button class='btn btn-light btn-sm deletecomment' comment_id='".$comment->comment_id."'>Delete</button></td></tr>";
}
}
}
echo $html;
exit;
}
But my comment column's row going outside and looking very bad, How I can show it fit the column?
Thanks!

Answer 1

You can refer https://www.w3schools.com/bootstrap4/bootstrap_tables.asp and
https://getbootstrap.com/docs/4.0/content/tables/ for more information.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
It's always a good practice to set the width of the columns to give more look and feel to the design and avoid taking auto width as per the content.
If you are not using bootstrap table utility classes then remember that your table should have the width 100% and there should be an overflow if the page is opened in the smaller devices to avoid inconsistency in the width of the page.
You can do that by enclosing it inside a div
<div style="overflow:auto">
<table class="table" style="width:100%;">
...
</table>
</div>
I hope that helps you.

Answer 2

use word-break style for td tag
e.g
<td style="word-break: break-word;">aaaaaaaaaaaaaaaaaaaaaaaa</td>