Issue with Bootstrap 4: When multiple tables are placed within columns, they overflow outside the parent element

Currently, I am utilizing Bootstrap (4 beta) and attempting to showcase two tables in two side by side columns. However, they seem to be overflowing outside of the parent element and I cannot determine how to adjust the layout appropriately. Check out the image below to see how it's being displayed currently. (The target browser is ie10 and above)

<div class="quote">
    <h6>data</h6>
    <div class="row">
      <div class="col">
        <div><img src="" alt="" class="__web-inspector-hide-shortcut__"></div>
        <div>
        </div>
      </div>
      <div class="col">
        <p>data</p>
        <p>data</p>
      </div>
      <div class="col">
        <p>Key features:</p>
        <p>Fixed<br>data</p>
      </div>
      <div class="col savings">

        <h6 class="text">data</h6>

        <h4>data</h4>

      </div>
      <div class="col">
        <button class="btn btn-cta-secondary btn-sm" data-id="83145667" id="button">More Info</button>

          <a class="btn btn-cta-primary" href="/users/profile/83145667">Proceed</a>

      </div>
    </div>

    <div class="row til" id="til83145667" style="">
      <table class="table col-lg-4">

        <tbody>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>

        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>

        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        </tbody>
      </table>
      <table class="col-lg-4 table">

        <tbody>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td></td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        <tr>
          <td>data</td>
          <td>data</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

https://i.sstatic.net/E48y9.png

csstwitter-bootstrapbootstrap-4

Answer №1

There are a couple of issues that need to be addressed:

1: Ensure your rows and columns are within a container like this:

<div class="quote container">
    <h6>data</h6>
        <div class="row">
            [...]

2: Do not directly apply the col classes to the <table> element - nest the table within a div with the class, for example:

<div class="row til" id="til83145667" style="">
    <div class="col-lg-4">
        <table class="table">
            [...]

Here's a Functional Code Snippet (Please note that borders have been added to the tables for clarity):

table {
  border: 2px solid #009999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="quote container">
  <h6>data</h6>
  <div class="row">
    <div class="col">
      <div><img src="" alt="" class="__web-inspector-hide-shortcut__"></div>
      <div>
      </div>
    </div>
    <div class="col">
      <p>data</p>
      <p>data</p>
    </div>
    <div class="col">
      <p>Key features:</p>
      <p>Fixed<br>data</p>
    </div>
    <div class="col savings">

      <h6 class="text">data</h6>

      <h4>data</h4>

    </div>
    <div class="col">
      <button class="btn btn-cta-secondary btn-sm" data-id="83145667" id="button">More Info</button>

      <a class="btn btn-cta-primary" href="/users/profile/83145667">Proceed</a>

    </div>
  </div>

  <div class="row til" id="til83145667" style="">
    <div class=" col-lg-4">
      <table class="table">
        <tbody>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>

          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>

          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-lg-4">
      <table class=" table">

        <tbody>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td></td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
          <tr>
            <td>data</td>
            <td>data</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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

Previewing Printed Forms in JSF

I am working with a JSF form on a view *.jspx page that contains approximately 20 fields. The form includes a print preview button that opens a new browser window and displays the form in read-only mode. To achieve this, I have utilized a workaround invol ...

javajavascriptcssjsfjsf-1.2

Using Bootstrap 4 to Directly Link to a Specific Tab

I am working on a Wordpress website with Bootstrap 4 tabs and I need to create a link that will take users to a specific tab from another page: In the index.php file: <a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More& ...

javascriptjquerywordpresstwitter-bootstrapbootstrap-4

How can you style a radio button in CSS while displaying a label next to it?

Trying to customize a radio button and align its label next to it using CSS has proven to be more challenging than expected. The current setup is not producing the desired outcome as the radio button appears distorted and the label is not perfectly inline ...

htmlcss

Applying class to target specific screen size in Bootstrap

I've been utilizing bootstrap for my project. My objective is to assign multiple classes based on screen size, such as sm-col and xs.col. For example, let's say I have a text id <div id="text" class="xs-format lg-format ..."></div> ...

csstwitter-bootstrapbootstrap-4column-count

Customizing CSS for the activity feed on Facebook using HTML5

Can I customize the appearance of the HTML5 Facebook activity plugin with my own CSS? This is the current code for the plugin: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d. ...

cssfacebookplugins

Implement a tooltip feature that appears when hovering over a specific class within a span tag

In my TS file I have an HTML string that I am displaying in my HTML file. Within the text, there are span tags with a class called "highlight." I would like to create a tooltip that appears when hovering over this highlight class. The string/text is store ...

javascripthtmlcssreactjsangular

Designing the button outline variant with Material-UI styling

I've recently started using Material UI and I'm facing some difficulties. One of the challenges I'm encountering is with a button component export default function TheButton(props: PropsWithChildren<Props>) { const { className, hover ...

cssreactjsmaterial-ui

Utilizing the Font Awesome icon as a clickable element

I'm currently working with the font awesome icon, but it seems too small and disappears when I mouseover it. <div class="row"> <div class="col-md-5 mx-auto"> <div class="input ...

bootstrap-4font-awesome

The inclusion of a new class in the div element is causing unnecessary page duplication

I'm attempting to designate a small section of text on my mobile webpage as the only part to be printed, specifically on a 62mm x 52mm brother label printer label. Below is the CSS I've implemented: @page { size: 62mm 52mm; marg ...

htmlcssjquery-mobile

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

htmlcss

Creating Layouts with Bootstrap 3

I'm exploring the codepen below in an attempt to mimic the appearance of the image provided consistently across all screen sizes. However, there are two issues that I am encountering - firstly, the green numbers on the first line which represent the d ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

The practical applications of column ordering in Bootstrap 4

Can anyone provide me with a practical example of how column ordering in Bootstrap 4 can be utilized? While I understand the concept, I'm looking to deepen my understanding by seeing real-life scenarios where this feature would come in handy. For mo ...

bootstrap-4

Exploring the contrast in importing CSS between the HTML header, JS file, and Vue Component

Exploring the world of Vue with webpack, I find myself curious about the various ways to import CSS. It appears that there are three methods for importing CSS: Adding style sheets directly to HTML headers: <link type="text/css" rel="stylesheet" ... &g ...

javascripthtmlcssvue.js

When utilizing a fixed header, the required textarea field does not scroll to its correct position. The CSS scroll-margin/padding property proves to be ineffective

On my website, I have a fixed header and a form with required input and textarea fields. If the form is submitted without these fields filled, I want the user to be scrolled to the top-most unfilled required field. The sticky navbar complicates this proces ...

htmlcssscrolltextarearequired

What is causing my Bootstrap navigation bar to not show up correctly?

I followed the Bootstrap 4 tutorials to create a navbar, but for some reason, my code isn't working. I made only a few changes to the nav-brand, so I'm not sure what went wrong. You can see what it looks like here. <nav class="navbar stic ...

htmlbootstrap-4

Styling with CSS: Creating a scrollable gallery of images with a hover effect

I'm struggling to align multiple images horizontally on the page with a hover effect for each image. I can achieve one or the other separately, but not both together. As a beginner in HTML/CSS, I know it's a simple process. Below is my code with ...

javascriptjqueryhtmlcss

Maintain visibility of the vertical scroll bar while scrolling horizontally

Currently, I am in the process of setting up a table with fixed headers and columns that have a minimum width. To ensure this setup functions correctly, I require both vertical and horizontal scroll bars. The vertical scroll bar should only navigate throu ...

htmlcsshtml-table

Adding a uniform header and footer across all pages simultaneously in HTML

I am currently working on a project where I want to apply the same header and footer design from my homepage to all pages. However, I need a method that allows me to update the header and footer in one place, so that any changes I make will automatically r ...

javascriptjqueryhtmlcssdreamweaver

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png I have been using "position: absolute" to keep the circle in place, but the is ...

htmlcssbootstrap-5navbar

Is there a way to make the right column stay fixed in the bootstrap-vue table?

How can I achieve fixed columns on both the left and right sides of a bootstrap-vue table? The Sticky function in the documentation only supports fixing columns to the left. Is there a way to also fix the right side or last columns? I am looking for a sol ...

vue.jsbootstrap-4bootstrap-vue