Currently, I am working on a Laravel project and have encountered an issue with a table that is overflowing from the right side. Despite trying various methods for implementing horizontal scroll, none of them seem to be effective in resolving the problem. I have been able to adjust the width of the card containing the table, but the table itself remains unchanged.
If anyone has insight on how to address this horizontal scroll matter, it would be greatly appreciated! Below is a screenshot depicting the overflowed section 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 class="container-scroller">
<div class="main-panel">
<div class="content-wrapper">
<div class="card">
<div class="card-body"> <a style="float: right; width: 20%;" class="nav-link btn btn-success create-new-button" id="createbuttonDropdown" href="{{url('/addLecturer')}}">+ Add New lecturer</a>
<h4 class="card-title">Columns Table</h4>
<br>
<div class="row text-center&amp;gt;
<table class="table table-bordered" class="table-width"&amp;gt;
<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>