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>

设置列的宽度始终是一个很好的做法，可以为设计提供更多的外观和感觉，并避免根据内容采用自动宽度。

如果您不使用引导表实用程序类，请记住您的表宽度应为 100%，并且如果在较小的设备中打开页面，则应该出现溢出，以避免页面宽度不一致。

您可以通过将其包含在 div 内来做到这一点

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

我希望这对你有帮助。