Sometimes the last column might not be visible in an HTML table within a collapsed Bootstrap element while using Chrome browser

I've encountered a strange issue when trying to wrap an HTML table inside a collapsing div element using Bootstrap. The last column is not consistently displayed in Chrome (44.0.2403.107 m) depending on the window width, but it works fine in Firefox.

If you want to see the problem for yourself, check out this fiddle --> https://jsfiddle.net/mattbt/5k7ym9qp/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
         <h4 class="panel-title">
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </a>
  </h4>

    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <table class="table table-bordered table-hover" style="background-color: white;">
            <thead>
                <tr class="info">
                    <th>header</th>
                    <th style="width:30px;">header</th>
                    <th>header</th>
                    <th style="width:75px;">header header</th>
                    <th>header header</th>
                    <th>header header</th>
                    <th>last col</th>
                </tr>
            </thead>
            <tbody id="tbody-1">
                <tr id="rowscen-1">
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada. Integer id lorem ultrices, eleifend ex ut, dignissim lorem. Nunc commodo tincidunt euismod. Cras at dui libero. Sed viverra neque in risus maximus facilisis. Phasellus nulla nisi, pretium vitae vulputate at, ornare in arcu. Praesent mi nulla, tincidunt sed lacinia eget, molestie ut elit. Aliquam nec tristique est.</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut imperdiet nibh. Ut finibus lectus sed metus elementum aliquam. Etiam rhoncus varius malesuada.</td>
                    <td>Lorem ipsum dolor sit amet</td>
                    <td>Last Column text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Resize your browser window to see the last column mysteriously disappear and reappear.

It might just be a small issue, but I could really use some help. Thank you!

Answer №1

Since you're utilizing Bootstrap, you have access to its pre-defined classes that handle functions like collapsing, as mentioned by 'messerbill' in the comment below your query. It's important to be cautious when using code from online examples, as some parts may not be relevant to your specific needs, such as the panel-collapse class in your provided code.

Take a look at this fiddle to see how the table layout is achieved using only Bootstrap classes without any inline styling. While it may not give you the exact answer you seek, it can certainly guide you in the right direction!

http://jsfiddle.net/w6u20yc9/

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

Converting a Google font for compatibility with ThreeJS: A beginner's guide

Is there a way to convert a downloaded Google font from TTF to JSON in order to use it with ThreeJS FontLoader / TextGeometry? import LatoFont from '../assets/fonts/lato-bold.json' const loader = new FontLoader(); const font = loader.parse(LatoF ...

Using PHP with MySQL and Jquery to create an associative array and displaying it by utilizing the JQuery $.each function

Currently, I am in the process of developing a calendar using FullCalendar to display daily orders along with the ordered items. One issue I encountered is that when integrating $order_info into the $data array, certain rows of data are missing. This probl ...

Having difficulty launching a new window within an app built with Electron and Nexjs (Nextron)

Attempting to launch a (Nextjs-generated) page in a new window is causing an error message to appear: Uncaught ReferenceError: global is not defined Here is the full error: react-refresh.js?ts=1665849319975:10 Uncaught ReferenceError: global is not de ...

Is there a method to communicate with controls via a web interface?

I've been exploring the possibility of interacting with ASP controls from within a webmethod. My initial thought was that I could achieve this by identifying the page where the webmethod was called from and then locating and updating controls on that ...

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

Can you explain the functioning of knockout container less syntax? (does it have any drawbacks?)

There are numerous instances and examples of using knockout ContainerLess syntax, although I find it challenging to locate proper documentation from their site. Initially, my question was "is it evil?" but upon realizing my lack of understanding on how it ...

Sending an array of JSON objects using jQuery is a simple and straightforward process. By

I'm currently facing a challenge while working on my web page - I am struggling to send an Array of JSON objects to my PHP backend script. Below is the JavaScript code I have been using (with jQuery): var toSend = new Array(); ...

Ensure to verify the input's value by clicking the button

Upon clicking a button, I am trying to determine if there is any content in an input field. However, it seems that the check only happens once when the website first loads. Subsequent clicks of the button do not detect any new input values entered into the ...

What is the reason why createServer() is often not recognized as a function?

After installing express globally and npm on my express app, I am encountering issues with both intellisence and the app itself (I am using visual studio code on mac OS Yosemite). Below is a snippet of the code: /// <reference path="typings/node/node. ...

Click Here for Additional Posts: AJAX Load Button

My issue arises when using ajax to "load more posts". Everything seems to be functioning correctly, however, once all the posts from the specific category have been displayed, the button continues to load random posts endlessly. I am unsure where I may hav ...

Node.JS guide on handling geonames city information

While unconventional, I wanted to share my solution since there is a lack of information on how to accomplish this task on the stack. After searching for an easy-to-use Node.JS module to process geonames data into a mongo database, I found very few project ...

After all other content has been fully loaded, jQuery UI is then loaded onto

For a while now, I've been following a YouTuber's JQuery UI tutorial. Every time I refresh the page, my HTML loads first and then my CSS fills in, causing a momentary flash of HTML and CSS without the UI. Is this normal? Can it be prevented? Her ...

Reversing the direction of an owl carousel slider to slide from right to left

I am looking to reverse the slider for Arabic language to change its behavior. Prevoius [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] Next Imagine that here 1 to 10 are blocks containing headings and descriptions. Therefore, I would like to reverse this ...

The $.ajax POST method successfully sends data to the server, but the $.ajax PUT method fails to do so

When utilizing jQuery to make an ajax call, I observed that using the POST method works perfectly fine. However, when switching to the PUT method without any other alterations, the object data is not being sent. This has led me to the question of why this ...

The issue with jQuery's .after() method is that it is inserting content as a string instead

Having trouble inserting a button element after another element selected using jQuery. Here's how I have my element selected: let btn = $("a[translate='server.ipmi.kvm.LAUNCH']")[0]; When I try to insert the button after it, I'm using ...

Utilizing JavaScript and the Document Object Model (DOM) to display images within a

My main goal is to have images load dynamically as the background of the browser frame, without any white spaces or repeats. I've successfully achieved this statically, but now I want to implement it so that different images are generated randomly. W ...

Combine strings in an array of objects

I have an array containing objects with a "Closed" property that holds numerical values. I want to loop through the array and concatenate all the "Closed" property values found in each object. For example, in the given array, the final result should be 12 ...

Sending a JS function to a PHP script

I've been incorporating the Soundcloud API into my project and successfully implemented their record button on my website. Once the upload is completed, the code generates the URL of the newly created soundcloud file. My goal now is to pass that URL ...

Retrieve the CSV file following a successful POST request

Is there a way to automatically download a CSV file upon clicking a button that triggers a post request? The post request generates a large response, making it inefficient to transfer it directly from express to the front end. I'm looking for a solu ...

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...