In a big, wide html bootstrap table, how do i control the horizontal scrolling?-CodePudding

I'm working on Laravel project and I have this table and it is overflowed from the right side, I tried some available methods for horizontal scroll but they just don't work with me...I can control the width of the card behind the table but the table does not changed

Anyone knows how to overcome this horizontal scroll matter would be highly appreciate it! Here is a screenshot of the overflowed part of the table: overflowed table

`
```
<x-app-layout>

</x-app-layout>

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        a {
            text-underline-offset: 5px;
        }

        table-bordered {
            max-width: 420;
        }
        .card-body,
        .card {
            max-width: 1240px;
        }
        .table-width {
            max-width: 120px;
        }
    </style>
</head>
<body>
    <div >
        <div >
            <div >
                <div >
                    <div > <a style="float: right; width: 20%;"  id="createbuttonDropdown" href="{{url('/addLecturer')}}">  Add New lecturer</a>
                        <h4 >Columns Table</h4>
                        <br>
                        <div >
                            <table  >
                                <thead>
                                    <tr align="center">
                                        <td>clo1</td>
                                        <td>clo2</td>
                                        <td>clo3</td>
                                        <td>clo4</td>
                                        <td>clo5</td>
                                        <td>clo6</td>
                                        <td>clo7</td>
                                        <td>clo8</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($x as $data)
                                    <tr align="center">
                                        <td>{{$data['clo1]}}</td>
                                        <td>{{$data['clo2']}}</td>
                                        <td>{{$data['clo3']}}</td>
                                        <td>{{$data['clo4']}}</td>
                                        <td>{{$data['clo5']}}</td>
                                        <td>{{$data['clo6']}}</td>
                                        <td>{{$data['clo7']}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>

CodePudding user response：

add class table-responsive to the div holding your table

<div >
  <table >
    ...
  </table>
</div>

from https://getbootstrap.com/docs/5.0/content/tables/#always-responsive