Bootstrap Таблица Рядов Выход на улицу

Question

У меня есть простая таблица на моем сайте Codeigniter, как показано ниже

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

, и я отображаю строку, как показано ниже

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

Но мой строка столбца комментариев выходит наружу и выглядит очень плохо, как я могу показать, что она подходит к столбцу?

Спасибо!

Answer 1

Для получения дополнительной информации вы можете сослаться на https://www.w3schools.com/bootstrap4/bootstrap_tables.asp и https://getbootstrap.com/docs/4.0/content/tables/.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Рекомендуется всегда устанавливать ширину столбцов чтобы придать дизайну больше внешнего вида и избежать автоматической ширины в соответствии с содержимым.

Если вы не используете bootstrap классы служебных таблиц, помните, что ваша таблица должна иметь ширину 100%, и должно быть переполнение, если страница открыта на меньших устройствах, чтобы избежать несоответствия в ширине страницы.

Вы можете сделать это, заключив его в div

<div style="overflow:auto">
   <table class="table" style="width:100%;">
        ...
   </table>
</div>

Надеюсь, это поможет вам.

Answer 2

использовать стиль переноса слов для тэга, например

<td style="word-break: break-word;">aaaaaaaaaaaaaaaaaaaaaaaa</td>