Excessive content in Bootstrap Table

I am currently facing an issue with two tables placed side by side using the Bootstrap grid system. While the tables are dynamic and visually appealing, I encounter a problem when adding lengthy strings dynamically. The overflow of text within the table causes it to push into the adjacent table, affecting responsiveness. This behavior seems to occur only when the character count exceeds a certain limit. Is this restriction due to a constraint in the bootstrap table grid?

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
    <div class="col-sm-6">
    <h2 class="sub-header">TITLE</h2>
      <div class="table-responsive">
            <table class="table table-striped ">
              <thead>
                <tr>
                  <th class="col-md-1">Subject</th>
                  <th class="col-md-2">Comments</th>
                  <th class="col-md-3">Owner</th>
                  <th class="col-md-3">Really Long Header that will case the table to overflow</th>
                  <th class="col-md-3">Date Activity Logged</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                  <td class="col-md-4">1,001</td>
                  <td class="col-md-5">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                  <td class="col-md-4">1,001</td>
                  <td class="col-md-5">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                  <td class="col-md-4">1,001</td>
                  <td class="col-md-5">1,001111111111111111111111111111</td>
                </tr>
              </tbody>
            </table>
          </div>
    </div>
    <div class="col-sm-6">
          <h2 class="sub-header">Title Two For Table Two</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
            </table>
    </div>
    </div>    
    </div>

htmlcsshtml-tableoverflowbootstrap-4

Answer №1

I recently discovered that the td's in the table have a column size. By removing the "col-md-2" from the td, the Bootstrap framework became responsive.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="col-sm-6">
    <h2 class="sub-header">TITLE</h2>
    <div class="table-responsive">
      <table class="table table-striped ">
        <thead>
          <tr>
            <th>Subject</th>
            <th>Comments</th>
            <th>Owner</th>
            <th>Really Long Header</th>
            <th>Date Activity Logged</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="col-sm-6">
    <h2 class="sub-header">Title Two For Table Two</h2>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Comment</th>
            <th>Created By</th>
            <th>Case/Merchant Number</th>
            <th>Created Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
          </tr>
          <tr>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</td>
            <td>1,001</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

Angular4 encountered an error: $(...).DataTable is not recognized as a function

I utilized the bootstrap4 datatable jQuery function within my Angular4 application to construct a sortable table. Below is the code snippet. .component.ts import { Component } from '@angular/core'; declare var $: any; @Component({ template ...

jqueryangulardatatablebootstrap-4

Eliminate the table background effect on hover using HTML and CSS

If you need assistance with a contact form, please visit this link. There seems to be an issue with the hover effect on the fields causing them to turn dark grey. This may not align with your desired plain white background. You can view a screenshot https ...

htmlcss

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Changing the read-only property of a form input using a button click

I have designed a form with some input fields marked as Readonly along with an icon placed beside each of them. Is there a way to toggle the Readonly property of a specific field when I click on the adjacent icon? Sample Form <div class="input-group"& ...

jqueryhtmlcss

A guide on sorting data by chosen tab using mat-tab in Angular

I'm currently exploring ways to filter data based on the selected tab's value using mat-tab. You can find more information about it here. For example, I aim to create a tab panel with three tabs representing cities: ALL, LA, and SF. If a user cli ...

htmlangulartypescriptfrontend

Tips for retrieving database records based on the chosen value in an HTML date picker

I need help with using an HTML date picker on my website. <form action="" method="POST"> <input type="date" name="date"> <input type="submit" style="position: relative; bottom:100px; ...

phphtmlsqldatabasepicker

I am eager to create a vibrant striped table using React.js, making use of the map function

Using the map function to display fetched device data, but struggling to create a striped color table. I want to alternate the background color of the tbody tag in stripes, using Bootstrap. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXX ...

cssreactjs

Two columns with one column having a fixed width

I am looking to create a layout with two columns, one for content and the other for a sidebox. The sidebox should have a fixed width while the content column can shrink as needed. Eventually, both columns will stack to 100% width, but I want the content c ...

htmlcss

Change the background color of cells according to the value they contain

I have a scenario where I am populating a table with random numbers, and I want the background color of each cell to change based on the value of the number in that cell. Since these numbers refresh periodically, I need the colors to update accordingly as ...

jqueryhtmlcssdynamic-tables

Switching the sorting criteria from 'AND' to 'OR' in the JPList library

I am currently exploring the use of JPList to sort on multiple items. As it stands, JPList searches like 'AND' when sorting (e.g. sorting based on an item with tags html, php and jQuery all together), but I am interested in filtering through all ...

jqueryhtmlcsssortingjplist

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

Tips on creating adaptable images for mobile viewing

My coding conundrum involves the use of two columns - one for an image and the other for a description of that image. However, when viewing my site on mobile devices, the image is cut off at only half its height. Adjusting both columns to col-sm-6 results ...

javascripthtmlcss

Guide on incorporating markdown in an ejs template

As I am planning to create a small blog using Express, EJS, and Markdown, I encountered an issue when trying to load Markdown on the page. Here is what I saw: https://i.sstatic.net/M2FEK.png Here's my code snippet: <!DOCTYPE html> <html la ...

javascripthtmlexpressejsblogs

Leveraging retrieved API data to generate numerous components

Hey there! I'm new to JavaScript and I'm working on creating a todo list with fake ToDos from jsonplaceholder using Fetch. My goal is to fetch five different ToDos and display them in separate list items within my list. However, I'm encounte ...

javascripthtmljsonplaceholder

Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...

javascripthtmlcsslightboxlightbox2

Using jQuery, inject code and text into an element

There's a situation where I have an array with exactly 3 entries. First Entry: <i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i> ...

jqueryhtml

Add a new class to an element located in a separate div using JavaScript

$(document).ready(function() { $('.btn').click(function() { $(this).parent().addClass('show'); }); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div clas ...

javascriptjqueryhtmlcss

Unlocking the Potential: Unveiling the Art of Activating Navigation in Single-Page Websites

I am currently developing a one-page website. In order to enhance the navigation experience, I want the active section or "page" to be visually highlighted in the navigation bar. At present, when I click on a link, it successfully displays with an underlin ...

jqueryhtmlcss

Struggling to make the bootstrap navigation bar function properly

I've been experimenting with replicating the basic framework to learn more about responsive web design using bootstrap. However, I've only been able to get certain parts to function correctly. For instance, I can use the "btn" class without any i ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Second update in Bootstrap datetime picker not functioning

I am trying to create a start date picker called dropoff_date_picker that is dependent on another date picker named pickup_time_picker. Initially, when I select a date from the pickup_time_picker, the dropoff_date_picker start date gets updated and functio ...

jqueryhtmltwitter-bootstrap-3bootstrap-4datetimepicker