How can I manage the horizontal scrolling in a large, expansive HTML Bootstrap table?

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;amp;gt;
                            <table class="table table-bordered" class="table-width"&amp;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>




Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for adjusting the border color of an ng-select component to red?

I am having an issue with the select component in my Angular HTML template. It is currently displaying in grey color, but I would like it to have a red border instead. I have tried using custom CSS, but I haven't been able to achieve the desired resul ...

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

I created a blur in/out effect for my landing page, but it's not functioning as expected and I'm not sure why. It blurs out correctly, but the issue arises when I want the underlying Div to fade in. Currently, it just appears abruptly after the ...

``Advanced Web Development: Dealing with HTML5, CSS3, and

I am facing an issue while implementing a design from the CSS and HTML login form templates on my project. Below is the snippet of my HTML: <p id="firstname_line"> <label>First Name:</label> <input type="text" name="firstnam ...

Unable to retrieve user ID for deletion in Laravel

I recently started learning Laravel and I encountered a problem while trying to delete a user. I can't seem to retrieve the ID of the user I want to delete. Any assistance on this matter would be greatly appreciated. view <form method="post" act ...

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

Is it advisable to set the html root at 62.5% when using rem units in CSS? Does this imply that the default font size of browsers is 16px?

During a discussion with a group, I mentioned the 62.5% trick for scalability (setting 62.5% as font size in root and using rem units throughout CSS for easier scalability when users change default browser font size) and their arguments were as follows: " ...

Enhancing ng-include in AngularJS upon user authentication (or exploring alternative solutions)

As I delve into learning Angular, I've embarked on a project to develop an app that controls content access based on authentication. The authentication aspect is functioning smoothly (with the aid of the Laravel PHP framework), but I'm encounteri ...

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Just starting out with Vue and diving into the world of CSS3! I'm currently working on a component that you can check out here: https://codesandbox.io/s/yjp674ppxj In essence, I have a ul element with relative positioning, followed by a series of di ...

adjust back side height of flip box does not function on IE web browser

I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e. ...

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

A guide on configuring Flexbox to consistently display three columns

For the website I'm working on, I've utilized Flexbox to properly align the items. Within the div .main, I have organized the content in separate divs. These are the CSS properties that I've applied: .main{ margin: 0 auto; /*max-height: ...

What is the process for dynamically altering the source file of VueRouter?

Hello, I am working on a project that involves multiple roles using VueJs and Laravel. Laravel is used as the back-end while Vuejs serves as the front-end. The project has three different roles: User, Modirator, and Editor. Here is a snippet of my code ...

Is it possible to change a Material UI style without resorting to an HOC?

Is there any method to modify the styling of a Material UI component without the need to create an entirely new component using withStyles()? For example, if I am currently displaying the following and simply want to adjust the color of the "Delete" label ...

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

Connect an existing function to JQuery animation

There is a function in place that changes the background image of a vertical website when a navigation menu item is clicked. <script type="text/javascript"> $(function() { $('a.panel-home').click(function(){ $("#bgimg").attr(' ...

When resizing the window, divs shift positions and prevent the use of the horizontal scrollbar

I'm encountering an issue with my website layout. Specifically, I have a full-width navbar with some divs nested within it. However, when the page is resized, the position of these divs in the navbar shifts and a scrollbar appears at the bottom of the ...

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

Align a button within an input field to be in line with a stacked label in

I'm currently facing some issues with Ionic because it's not placing my button where I want it to be: https://i.stack.imgur.com/qtUQJ.png My goal is to have the button on the same line as the input, similar to the clear-button. This is the cod ...

Is there a way to alter a class using ng-class only when the form is deemed valid?

I am trying to implement a feature where an input field shows as required, but once the user enters text, it indicates that the input is valid by changing the border color from red to green. I am facing an issue with this line of code always returning fal ...

The CSS selector for radio input does not match when checked in IE7

I've been attempting to add a style to the label for a radio button with the CHECKED attribute, but so far all my attempts have failed to match on IE7. For example, I have created a JSFiddle here: JSFiddle. <!DOCTYPE html> <html> < ...