Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm facing an issue where it seems like each column is only occupying two-thirds (2/3) of the available space within the table. Despite scouring the internet for solutions, checking various sources including Stack Overflow, I haven't been able to find a resolution yet and I'm seeking assistance.

You can view a direct HTML rendering of the error here

Below is an image illustrating the problem:

The example image showcases that the slim red column occupies a third of the table space in the green-bordered table. However, the table itself isn't expanding to utilize the entire available space within the red div. After inspecting the HTML render thoroughly, I couldn't identify the cause behind this issue.

<div class="area">
        <section class="wrapper scrollable">
            <div class="main-grid">
                <div class="agile-grids">
                    <!-- blank-page -->
                    <div class="blank">
                        <div class="blank-page">
                            <h1>Session is active</h1>


<table class=" " style="border: 1px solid red;">
    <tbody>
        <tr scope="row" style="border: 1px solid red;">
            <td class="text-center" style="border: 1px solid green;">
                <div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;">
                <div class="card_user-charProfile">
                    <img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan">

                    <div class="card">
                        <div class="card">
                            <p> content goes here</p></div>
                        </div>
                    </div> <!-- end row -->
                </div><!-- end CHARACTER PROFILE OUTER DIV -->
            </td>
        </tr>                               
    </tbody>
</table>
                    </div>
                 </div>
            </div>
        </div>
    </section>
</div>

Check out the CSS declarations / links below:

<script language="JavaScript" type="text/javascript">
    <!-- This JS disallows hijacking into someone else's frame...
     if (top.location != self.location){top.location=self.location}
    //-->
</script>

<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet">


<!-- font CSS -->

<!-- roboto -->
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">

<!-- lato -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<!-- hammersmith one -->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">


<!-- __themes/_fonts/font-glyphicons.css  -->
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet">
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet">

<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<script>
    $(function () {
    $("#supported").text("Supported/allowed: " + !!screenfull.enabled);
    if (!screenfull.enabled) {
        return false;
    }
    $("#toggle").click(function () {
        screenfull.toggle($("#container")[0]);
    });
});
</script>

Answer №1

Have you considered utilizing the Bootstrap grid system instead of relying on a table? Utilizing tables in your project can be avoided by setting a specific width:

td{width:100% !important;}

Give this approach a try, it could potentially provide some benefits.

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

Creating a visually appealing website with Bootstrap 3

Looking to create a unique HTML design using Bootstrap. So far, this is what I've come up with: Plunker Any suggestions or assistance would be greatly appreciated. ...

What is causing compatibility issues between Firefox and the provided CSS code?

I am experiencing an issue with the page layout in FireFox. The widths are not displaying correctly and the upload button does not work. However, I have no problems when using IE or Chrome. I have reviewed the code but cannot find any errors. Here is the ...

Move the footer to the bottom of the page

Is there a way to position my footer at the bottom of the screen and make it extend to the full width in a responsive manner? https://i.sstatic.net/19lSB.jpg Custom CSS for Footer: * { margin: 0; } html, body { height: 100%; } .page-wrap { min-heig ...

Flexbox Columns Maintaining Width when Window is Resized

My current challenge involves utilizing Flexbox to create a responsive layout with 5 boxes that shrink when the browser window is resized. However, 4 of these boxes are not reducing their width as expected when placed in columns. (Despite Bob behaving cor ...

Creating a background overlay on top of an image background using styled-components in React: A step-by-step guide

I need help figuring out how to construct a unique component in react styled component that combines a background image with a black semi-transparent overlay. For visual reference, here is an example: https://i.sstatic.net/R6IBY.jpg ...

Set the datepicker with the window positioned to the right side

In my current project, I am utilizing Angular 13, Bootstrap 5, and ngx-bootstrap-fix-datepicker version 5. "bootstrap": "^5.1.3", "ngx-bootstrap": "^8.0.0", "ngx-bootstrap-fix-datepicker": "^5.6.8" ...

What is the best method for applying a gradient color to the parent class in CSS using pseudo classes (before and after)?

"Is there a way to overlay gradient colors on pseudo-classes (before and after) while working with parent classes in CSS? I am attempting to create arrow shapes using div elements and the 'after' class. The div's background color consis ...

Tips for eliminating extra blank space under the footer on an HTML website

Just beginning my journey with bootstrap and I am encountering an issue on my website where there is space after the footer when resizing to a mobile size. I've tried setting margin: 0; padding: 0; but it hasn't resolved the problem. Here's ...

The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen. Using version 4.5 of jqGrid. The table is created as follows: // Table creation using jqGrid $('#shipTable').jqGrid({ data: tabl ...

Chrome isn't showing the Background Image

I am currently working on coding a basic HTML/CSS page and I want to include a background-image within a div element that links to a URL. Interestingly, my code is functioning properly in Safari (Mac) and Firefox but unfortunately not showing the desired r ...

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

Guide to dynamically add tr element using CSS to a table

While using the $.each function in jQuery, I am retrieving data and adding it to a table in the following manner: $.each(segment, function (index, innerSegment) { var tr; tr = $('<tr/>'); tr.append("<td>" + segment[i].Airline.Air ...

Adjusting and arranging multiple thumbnail images within a container of specific width and height

I need a user-friendly method to achieve the following. The thumbnails will not be cropped, but their container will maintain a consistent height and width. The goal is for larger images to scale down responsively within the container, while smaller image ...

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...

What could be causing the header's height to remain unchanged when using a percentage for its size?

I'm having trouble creating a header that takes up 20% to 40% of the body. When I try using percentages, it doesn't work but it works fine with pixels. Can someone explain why percentages aren't working for this? *{ margin:0; padding: ...

Tips for positioning a button beside a ListItem

Is there a way to place a button next to each list item in ASP.NET? <asp:CheckBoxList ID="lstBrembo" runat="server"> <asp:ListItem Text="Popular" Value="9"></asp:ListItem> // <--- trying to add button here, but getting parse error ...

What is the best way to align inline-block elements in the center?

I'm looking for a way to center inline-block elements, but I haven't had much luck so far. When I tried using margin-top: x em;, it just moved the image down instead of centering it. The inline-block is intentionally nested inside an image block. ...

Initiating CSS3 animations when the display changes

In an attempt to incorporate CSS3 animations for fading elements in during page load, I am faced with the challenge of setting the element to display: none; and then back to display: block;. My goal is to exclusively apply the CSS3 animation upon the init ...

Expanding the size of select dropdown in Material UI to accommodate more options

Is there a way to increase the width of the drop down to 400px? I tried adding inline styles, but it didn't work. Upon debugging, I realized that the width is being overridden by this class. I'm not sure how to overwrite it. Could you please prov ...

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...