Using colspan in scrollable table

Question

I am using mdbootstrap for a project and I need a table to be scrollable which I did with the datatable addons but now I need to put some colspan in my table to put a button (2 actually) to be able to modify the row of the table

this look like what I've tried so far:

<?php 
$sql ="SELECT * FROM `client` WHERE 1"; 
if($result = mysqli_query($conn,$sql)){
?>
 <table id="dtVerticalScrollExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
 <thead>
    <tr>
      <th class="th-sm">id</th>
      <th class="th-sm"> name</th>
      <th class="th-sm" colspan="2"> Action</th>
    </tr>
</thead>
<tbody>
<?php
    while ($row = mysqli_fetch_assoc($result)) {
?>
   <tr>
      <td><?php echo $row["client_id"]?></td>
      <td><?php echo $row["client_name"]?></td>
      <td> <a href="edit.php?edit=<?php echo($row["mouvement_code"]);?>" class="btn btn-info">Edit</a>
           <a href="../process.php?delete=<?php echo($row["mouvement_code"]);?>" class="btn btn-danger">Erase</a></td>
   </tr>
<?php 
    }
?>
</tbody>
<tfoot>
    <tr>
      <th>id</th>
      <th>name</th>
      <th colspan="2" >Action</th>
    </tr>
</tfoot>
</table> 
 <!-- JQuery -->
<script type="text/javascript" src="../MDB-Free_4.8.7/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../MDB-Free_4.8.7/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../MDB-Free_4.8.7/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../MDB-Free_4.8.7/js/mdb.min.js"></script>
<script src="../MDB-Free_4.8.7/js/addons/datatables.js">
   $(document).ready(function () {
   $('#dtDynamicVerticalScrollExample').DataTable({
   "scrollY": "50vh",
   "scrollCollapse": true,
   });
   $('.dataTables_length').addClass('bs-select');
   });
</script>
<?php } ?>

It was working fine before the Action column but now it display the all table without scrolling option.

without colspan: with colspan:

EDIT: I added the Js code that make the table scrollable and the images

Why are you using a colspan when you only have 3 columns in every rows ? Did you forget to split each `` tag in its own `` ? — Morphyish, Aug 02 '19 at 10:12
I actually have 14 column total, this is an example. And I want the 2 button to be in the same column. I guess I could split them in two column if that help, but I don't think it will change anything. — marin dcv, Aug 02 '19 at 10:17

score 0 · Answer 1 · answered Aug 02 '19 at 10:25

I just added another column for your button and not sure if you really need this. please show screen shot or something if you need more help.

    <?php 
    $sql ="SELECT * FROM `client` WHERE 1"; 
    if($result = mysqli_query($conn,$sql)){
    ?>
    <table id="dtVerticalScrollExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
    <thead>
        <tr>
        <th class="th-sm">id</th>
        <th class="th-sm"> name</th>
        <th class="th-sm" colspan="2"> Action</th>
        </tr>
    </thead>
    <tbody>
    <?php
        while ($row = mysqli_fetch_assoc($result)) {
    ?>
    <tr>
        <td><?php echo $row["client_id"]?></td>
        <td><?php echo $row["client_name"]?></td>
        <td> <a href="edit.php?edit=<?php echo($row["mouvement_code"]);?>" class="btn btn-info">Edit</a> </td>
        <td> <a href="../process.php?delete=<?php echo($row["mouvement_code"]);?>" class="btn btn-danger">Erase</a></td>
    </tr>
    <?php 
        }
    ?>
    </tbody>
    <tfoot>
        <tr>
        <th>id</th>
        <th>name</th>
        <th colspan="2" >Action</th>
        </tr>
    </tfoot>
    </table> 
    <?php } ?>

I've added images to the post – marin dcv Aug 02 '19 at 11:23 — marin dcv, Aug 02 '19 at 11:23

Using colspan in scrollable table

1 Answers1