Trouble encountered while creating a table with the Bootstrap grid system

I'm attempting to create a table using the bootstrap grid system. The HTML code below is meant to generate the table, but I'm encountering an issue where the table cells overlap on screens with a width of 768px.

.row.header {
  height: 44px;
  border-top: 1px solid #CCCCCC;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #F3F3F3;
}
p.block-space {
  margin: 15px 0 16px 0px;
}
div[class^="col"] > label {
  margin: 15px 0 16px 0px;
  text-align: center;
  font: normal 14px Helvetica;
  color: #666666;
}
.col-margin-header {
  margin-left: 10px !important;
}
.col-margin {
  margin-left: 15px !important;
}
.xs-col-margin {
  margin-left: 5px !important;
}
dt.heading {
  font: bold 14px Helvetica;
  text-align: left;
  color: #333333;
}
.dd-description {
  font: normal 14px Helvetica;
  color: #666666;
}
@media (min-width: 320px) {
  div[class^="col"] {
    padding-left: 2px;
    padding-right: 2px;
  }
  .row {
    background: #fff;
    border-bottom: 1px solid #CCCCCC;
  }
}
@media (min-width: 768px) {
  div[class^="col"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  .row {
    background: #fff;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
  }
  
   /* Medium devices (desktops, 992px and up) */
}

@media (min-width: 992px) {
  div[class^="col"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  .row {
    background: #fff;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
  }
   /* Large devices (large desktops, 1200px and up) */
}

@media (min-width: 1200px) {
  div[class^="col"] {
    padding-left: 15px;
    padding-right: 15px;
  }
  .row {
    background: #fff;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Example of Bootstrap 3 Grid System</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <br/>
    <br/>
    <div class="row header visible-sm-block visible-md-block">
      <div class="col-sm-1 col-md-1">
        <label class="col-margin-header">Select</label>
      </div>
      <div class="col-sm-11 col-md-11">
        <div class="col-sm-1 col-md-1">
          <label>Bank</label>
        </div>
        <div class="col-sm-1 col-md-1">
          <label>Agent</label>
        </div...

The code works fine on desktop, but encounters issues specifically at 768px screen size.

htmlcsstwitter-bootstrap

Answer №1

I totally agree with your decision to use divs instead of tables in Bootstrap, as working with tables can be quite a headache. In my opinion, the reason for the overlapping issue is due to the fact that the cells are too small to accommodate the content adequately.

There are a few options you could consider:

One option is to add "overflow:hidden;" to the columns to hide any excess content and prevent overlap:

div[class^="col"] {
    overflow:hidden;
}

You can view an example here: https://jsfiddle.net/4sxogckb/

However, this approach may not be ideal as it makes viewing the data difficult.

Another solution is to force long words to break by using the following CSS:

div[class^="col"] {
    word-break: break-all;
}

Here's a demonstration link: https://jsfiddle.net/8swd3km5/

Yet, this method might not be aesthetically pleasing.

Your best bet would be to reconsider the design and find a way to present the data more effectively without relying on an 11-column table for smaller screens.

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

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Here is an example of my ul li structure: <div id="categoryTree"> <ul> <li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">N ...

javascriptjqueryhtmlcss

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

django displaying a blank screen

I'm having trouble with the code, forms.py from django.form import datetime, widgets import datetime import calendar from bootstrap_datepicker.widgets import Datepicker class DateForm(forms.Form): date_1=forms.DateTimeField(widget=DatePicker( ...

pythonhtmldjango

Prevent the box from closing automatically after submitting a form using jQuery

Despite my efforts to keep a simple dialog box open after submitting a form, it continues to close. I tried using the preventDefault method in jQuery, but it didn't solve the issue. Below is the code snippet: $(document).ready(function(e) { $(&apo ...

javascriptjqueryhtmlcss

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names: function rotateAllBoxes() { var boxes = document.getElementsByClassName("box"); for (var i = 0; i < box ...

javascriptcss

Create a border surrounding the matColumn within a sticky matTable

I am currently working with a matTable that has the first two or three columns set as sticky. However, I am facing an issue where the scrolling behavior of the non-sticky columns under the sticky ones looks like a glitch due to existing border styling on t ...

csshtml-tablecss-selectorsstickysiblings

Display the content within the preformatted tag

As a Python and Selenium novice, I am eager to extract the text within the pre tag of the provided snippet using Python Selenium. <body><pre style="word-wrap: break-word; white-space: pre-wrap;"> " Here is some sample text that I need to re ...

pythonhtmlseleniumweb-scrapingautomation

Building Dynamic Forms with React.js and Bootstrap for Easy Input Field Management

In the process of developing a web application using React.js and react-bootstrap, I encountered an interesting challenge. On one of the form pages, users should be able to input symptoms of an illness they are dealing with. The key functionality required ...

javascriptcssformstwitter-bootstrapreactjs

What is the best way to access the camera of a mobile phone through a web application?

Whenever I try to access the camera on my mobile device through a web app, I encounter an issue. While the camera works perfectly fine on the web version, it fails to show up on my mobile device unless I add https:// in the URL. How can I resolve this prob ...

javascripthtmlcameraqr-code

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

Whenever I directly click on my div, the pageUp and pageDown keys scroll the contents of the div. But when I trigger a click programmatically, the scrolling with pageUp and pageDown stops working. How can I enable scrolling with pageUp and pageDown without ...

javascriptjqueryhtmlangularjs

Problem with overlapping numbers in the Vis network

I am currently working on a project using Angular 8 and Visnetwork. Everything is going well, but I am facing an issue with overlapping numbers on lines. Is there a way to adjust the position of the numbers on one line without separating the lines? Can s ...

javascripthtmlangularnetworkingvisnetwork

Ways to repair an element

Can anyone help me troubleshoot the issue with my count text on a div block? It seems to be affected by changes in screen size. Normal https://i.stack.imgur.com/RZkgr.png On screen resize https://i.stack.imgur.com/hTdCG.png The Code: span.right-cor ...

htmlcssweb

Customizing checkbox appearance without including a label

After following a tutorial on how to style checkboxes found here, I was able to create a custom styled checkbox. However, I noticed that when I removed the label from the checkbox, it disappeared and was no longer visible. Is there a way to display the c ...

htmlcsscheckbox

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

htmlcss

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics

Feature of Thymeleaf: Download functionality

When working with my Thymeleaf template, I have successfully processed Java map content to HTML using the following code: <div th:each="file : ${files}"> <span th:text="${file.key}"></span> <!-- here file.key is retrieved --> ...

javahtmlthymeleaf

My goal is to have the "show more" button reveal extra information without having to reload the entire page

I’m trying to figure out how to make the “more” button show additional information without reloading the entire page. I’ve done some research online and found that AJAX can help with this, but since I’m just starting to learn JavaScript, I have n ...

javascripthtmlajax

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

javascriptjqueryhtmllocationgoogle-places-api

The Bootstrap toast fails to appear on the screen

I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...

javascriptjqueryhtmlcssbootstrap-4