What is the best way to eliminate vertical scrolling from a data table in Bootstrap?

My issue arises when fetching data using a while loop from the database and having a lot of entries in my data table, resulting in an unwanted scrollbar showing up.

You can view a screenshot here.

I have attempted the following to remove the scrollbar:

#mytable::-webkit-scrollbar {
    display: none;
}

and :

.table .table-bordered .table-striped  {

    overflow-x: hidden;
    overflow-y: hidden;
}

The template I am using is Bootstrap 3.

Here is a snippet of my code:

<table id="rip"class="table table-bordered table-striped js-dataTable-full-pagination">

<thead>

<tr>
<th><input id="selectAllboxes" type="checkbox">

<th>cc num</th>
<th>cc</th>
<th>student name</th>
<th>com date</th>
<th>stats</th>
<th>Edit</th>
<th>Print</th>


</tr>
</thead>
<tbody>




   echo "<tr>";
   ?>
  <th><input class='checkboxes' type='checkbox' name='checkBoxArray[]' value='<?php echo $cert_id; ?>'></th>

   <?php
   echo "<td>{$cert_id}</td>";
   echo "<td>{$course_title}</td>";
   echo "<td>{$name_student}</td>";
   echo "<td>{$date_com}</td>";
 echo "<td>$status</td>";

echo"<td>

<a  href='' target='_blank'><i class='fa fa-print fa-2x'></i></a></a>
</td>




";

echo "<td><a href=''><i class='fa fa-edit fa-2x'></i></a></td>";

echo "</tr>";
      }
?>

</tbody>
</table>

Despite trying different solutions, I still haven't been able to remove the scrollbar. Any suggestions on how to tackle this issue?

Answer №1

When working with your css, consider incorporating the following:

    body {
        overflow-y:hidden;
    }

This solution was recommended by Bootstrap : how to disable vertical scrollbar?

Answer №2

Resolved by including the line scrollY : False;

in the JavaScript document

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

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...

Using the <script> attribute within the <head> tag without the async or defer attributes

https://i.stack.imgur.com/cRFaR.pngCurious about Reddit's use of the async or defer attribute in the script tag. Are there situations where blocking the parser is necessary? ...

Preventing CSS elements from shifting during transitions

Whenever I apply a Transition to a CSS element, the content below it shifts. Here's an example on JSFiddle: http://jsfiddle.net/pgdxd7su/ (Please refer to the JSFiddle link as the code snippet may not work correctly). h1{ font-size } h1:hover{ ...

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

Setting up a Bootstrap tokenfield for usage with a textarea

I was attempting to set up a tokenfield on a textarea with increased height, but it is showing up as a single-line textbox. How can I modify the tokenfield to function properly with a textarea? <textarea name="f1_email" placeholder="Enter Friends' ...

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

Aligning columns to the right in Bootstrap, featuring an unordered list without any text wrapping

I am trying to prevent the lines from overflowing onto the next line. The details should all be on the same line. I have attempted a solution, but it's not working as expected. https://i.sstatic.net/MYgv5.png <div class="container"> <div cla ...

Incorporate CSS styling into ScalaHelpers

Is it possible to customize the CSS for Scala Helpers and remove certain text from the textfield? https://i.sstatic.net/eG6HY.png @inputText(advForm("weeknr")) @inputText(advForm("jaar")) @inputText(advForm("datum")) --------------------EDIT 1---------- ...

html5-jquery checkbox change event not firing

I successfully implemented an on/off switch using the method outlined in for HTML5. The functionality of the switch itself is working perfectly - click on it to toggle between states and query the checked state of the input/checkbox. However, I am facing ...

What exactly is the significance of "utilizing a universal class name"?

In my current project, I am utilizing Material-UI version 3.1.2 to create the interface. Previously, when I was using Bootstrap4, I included style="overflow-y: scroll; height: 100%" in my head tag to ensure a scrollbar is always present, preventing the ap ...

Bing Webmaster Tool identifies excessive HTML size on your website

After running a site scan using the Bing Webmaster Tool, I discovered that some of my pages contain the issue of "Html size is too long". One specific example is this page: I am unsure how to address this issue. According to Bing, it could be due to the w ...

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Looking for help with integrating HTML/CSS code into React/Bootstrap? I need assistance with coding in React using Bootstrap. How do I effectively use components and props? Even after installing bootstrap, I am encountering errors. Is it possible to dire ...

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

Within an HTML document, select one checkbox out of two checkboxes without utilizing JQuery

Is there a way to select only one checkbox out of two? I know it can be done easily using Jquery, but is there a default option in HTML for this as well? I have exactly 2 checkboxes. Thank you. code: <input type="checkbox" value="1" name="foo" /> ...

What is the best way to retrieve the initial <ul> element from a JavaScript document?

Just to clarify, I'm looking to target a specific div with a class and the first <ul> from a document (specifically in blogger). Currently, I have a JavaScript function that grabs the first image and generates a thumbnail as shown below: //< ...

When the cursor hovers over the card, I want to show an image that stretches across the space above the footer and beneath the horizontal line, without spilling over the edges

I'm struggling with getting the hover image to fit the content area correctly. If I apply overflow: hidden to .card-content, it gets cropped to the size of the paragraph, and without it, the image overflows beyond the box. What I want is for div .card ...

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

JSDOM failing to retrieve complete list of elements from webpage

I'm currently struggling with a simple webscraper using JSDOM. Here's the code snippet I've been working on: const axios = require("axios"); const jsdom = require("jsdom"); const { JSDOM } = jsdom; let v = "15" ...

Fade in and out HTML divs using jQuery with customizable timing intervals

I'm attempting to alter an existing solution here by incorporating a total of 7 divs that have fading in and out effects, all within the same space on the page. The sequence should loop back to the initial div after reaching the end. In addition, I r ...