What is causing the breakdown of bordered tables in Bootstrap when the border-separate property is set to collapse?

I am experiencing an issue with my bordered table that is using the Bootstrap classes table table-bordered. When I add border-collapse: separate, the borders are correctly separated, but the top and bottom borders seem to disappear due to zero width.

I am unsure if this is a Bootstrap quirk or if I am implementing something incorrectly. Can someone guide me on the correct approach to resolve this issue?

.table-bordered {
    border-collapse: separate;
}
<!doctype html>
<html lang="en>
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Bootstrap test</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f6c7d6c30073d0b3e20">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous>
  <link rel="stylesheet" href="/test.css>
</head>
<body>
  <container>
    <div class="row>
      <div class="col-6>
        <table class="table table-bordered m-5>
          <tbody>
            <tr>
              <td>Box</td>
              <td rowspan=2>Big box</td>
              <td>Box</td>
            </tr>
            <tr>
              <td>Box</td>
              <td>Box</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </container>
</body>
</html>

Answer №1

When working with bootstrap css, utilize border-width: 1px 0 and remember to make adjustments as needed.

.table-bordered {
    border-collapse: separate;
}

.table-bordered td {
  border-width: 1px !important;
}
<!doctype html>
<html lang="en>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Bootstrap test</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a7a61666167746555203b253b25387770617426">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous>
  <link rel="stylesheet" href="/test.css>
</head>
<body>
  <container>
    <div class="row>
      <div class="col-6>
        <table class="table table-bordered m-5>
          <tbody>
            <tr>
              <td>Box</td>
              <td rowspan=2>Big box</td>
              <td>Box</td>
            </tr>
            <tr>
              <td>Box</td>
              <td>Box</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </container>
</body>
</html>

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

Setting a border on a specific column in ag-grid is a simple task that can help you customize

I have a table where the first set of columns differs from the rest. I am looking to emphasize this distinction by adding a vertical border on the right side of the specific column to highlight it both in the header and rows. Our setup includes using the ...

Ways to eliminate the gap produced by a fixed element

Why is my chatbox (marked in red) creating unnecessary space at the top (highlighted in yellow), even though it has a sticky position and should not be affecting that area? The other elements on the webpage seem to be impacted by this. How can I prevent th ...

Creating a dropdown menu and adjusting the content below

Feeling stuck in one place with my code here: link The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link $(document).ready(function() { $('.interfejs, .proces ...

What is causing the columns in Foundation 6 to not align next to each other?

At 1090px screen width or in tablet mode, the columns do not align side by side and instead one is pushed down creating a white space between them. I am using Foundation 6 with 12 columns, but it does not work well on medium-sized screens; it only function ...

The color of hyperlinks in firefox varies based on the specific URL being visited

I am a beginner in the world of html and css. I have two links placed consecutively. In my css file, I have defined classes for a:link and a:hover. However, I noticed that the second link is displaying a purple color instead of silver. Both links correctly ...

Ensure that button positioning lines up properly even if adjacent content causes it to shift

I have developed several products using only HTML & CSS. One challenge I am encountering is that when the content inside the div exceeds a certain length, it causes everything to shift down, resulting in uneven alignment (refer to the 3rd product in the i ...

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Currently, I am implementing a survey progress bar using Bootstrap's "loading" style. Here is the code for the progress bar: <div class="progress" style="height: 20px;"> <div class="progress-bar" role="pro ...

The styling of Div remains unchanged by CSS

Currently, I am working on a website using HTML and CSS. I have created a division element and applied a class to it called profile_pic. However, when I make changes to this class in the CSS file, it does not reflect on the div. It seems like the styling ...

Button for Toggling Audio Play and Pause

Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should ...

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

HTML input field's placeholder text is truncated at the end

My HTML input form has a field with placeholder text that extends beyond the padding and gets cut off at the end. https://i.sstatic.net/9r46F.png I am unable to pinpoint the source of this issue. ...

Confirming the authenticity of a newly added user input with the help of jQuery

Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...

Dynamic Menu Navigation (No Bootstrap Required)

My Navbar is working perfectly in the original mode but when the screen width is less than 950px, it displays the buttons stacked vertically. However, the dropdown button opens the dropdown content on the wrong side. I want the dropdown content to appear u ...

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

The slider components have an endless loop feature that only runs once before coming to a

I'm working on creating an infinite slider that loops continuously without the need for navigation buttons. Instead, I plan to allow users to control the slider using touch gestures (although this functionality is not yet implemented in the code snipp ...

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

Tips for organizing wells within bootstrap into separate columns

Looking for a way to organize my well list into two separate columns. I've included a link to my Plunker project here: https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview. Below is the view section: <div class="well well-lg" ng-repeat="(key, d ...

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...