我的数据表无法固定到页面上如何在整个页面上显示我的表？

Question

我有数据表，但它显示在页面的一半。我想在整个页面中显示。

以下是表格显示在半页中的图像

<style>
  .table {
  text-transform: uppercase;
}
</style>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css">
  <link rel=" https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  <link rel=" https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.bootstrap4.min.css">

<section class="content">
  <div class="container-fluid">
     <div class="card">
      <div class="card-body">
       <table id="example1" class="table table-bordered table-striped" style="overflow-x: auto;">
          <thead class="bg-info">
          <tr>
            <th>E.Id</th>
            <th>Name</th>
             <th>Update</th>
            <th>Disable</th>
            <th>Upload</th>
          </tr>
          </thead>
          <tbody class="table-hover">
            <?php foreach($employees as $post){?>
          <tr>
          <td><?php echo $post->user_id;?></td>
          <td><?php echo $user_full_name;?></td>
          <td><a class="btn btn-success btn-sm"><i class="fa fa-pencil"> Update</i></td>
          <td><a class="btn btn-danger  btn-sm"><i class="fa fa-trash">  Update</i></td>
          <td><a class="btn btn-success btn-sm"><i class="fa fa-trash">  Update</i></td>
         </tr>
          <?php }?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<script>
  $(document).ready(function() {
  var table     = $('#example1').DataTable( {
  scrollY:        "500px",
  scrollX:        true,
  scrollCollapse: true,
  paging:         false,
  fixedColumns:   true
 });
});
</script>

在表中，我添加了overflow-x auto style="overflow-x: auto;"，但是它不起作用。 我不知道我的代码中缺少什么。

Answer 1

添加以下样式

<table id="example1" class="table table-bordered table-striped" style="width: 100%;">