Bootstrap Table Layout with gaps between rows, enclosed in a border with no borders inside cells

Does anyone know how to achieve this style using bootstrap 5?

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

The table has space between the rows and a border around the rows, but no border between the columns. I've been attempting to recreate it for 4 hours without success.

Here is my current code:

<style>
    .giro-table{
      border-collapse: separate;
      border-spacing:0 15px;
    }
    .giro-table 
    .giro-table tr{border:1px solid #A8A8AD;}
    .giro-table th{background:#A8A8AD;}
    .giro-table td{padding:20px;}

  
  </style>

  <table class="table table-striped table-hover giro-table table-bordered" style="max-width:700px;margin:0 auto;">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Answer №1

To achieve a customized look, you must first eliminate the default borders and then apply your own borders.

Refer to the notes provided in the code snippet below.

.giro-table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

.giro-table .giro-table tr {
  border: 1px solid #A8A8AD;
}

.giro-table th {
  background: #A8A8AD;
}

.giro-table td {
  padding: 20px;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 !important; /* Remove default borders */
  border-top: 1px solid grey !important; /* Apply custom border */
  border-bottom: 1px solid grey !important; /* Apply custom border */
}

td:first-child,
th:first-child {
  border-left: 1px solid grey !important; /* Apply custom border */
}

td:last-child,
th:last-child {
  border-right: 1px solid grey !important; /* Apply custom border */
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a3b8a4b8a4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab6aab6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<table class="table table-striped table-hover giro-table table-bordered" style="max-width:700px;margin:0 auto;">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Answer №2

Have you examined the classes applied to your table or any custom CSS that might be causing this issue? It seems like there may be something that needs to be removed.

Check out these examples for reference: https://getbootstrap.com/docs/5.0/content/tables/

If you could share your HTML, it would make it easier to provide a more specific answer.

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 CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

Apply the CSS rule specifically for desktop screens, excluding mobile and tablet devices

My website has a logo in the header that appears too small on computer screens. I came across a code snippet that allows me to increase the size of the logo, but I only want this change to be applied on computers and not on mobile or tablet devices. The co ...

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

How can I assign a default value for a multiple select dropdown list in AngularJS?

I am currently facing an issue with my multiselect dropdown. The code for the dropdown is as follows: <select id="year" multiple ng-model="type" ng-disabled="!type1" > <option value="all" selected>all</option>; <option value= ...

Place a label within a container and surround it with a single border. Inside the container, create an unordered list

I'm attempting to design a filter dropdown feature where only the label of the dropdown is visible at first, and then upon clicking the label, a list of options will drop down over the top of the remaining content using absolute positioning. The chall ...

Navigating Struts - The art of breaking free from encoded symbols in a text field

I'm having trouble displaying the trademark symbol in a default text within a Struts text field. Despite trying various methods, the symbol does not appear and only outputs the code instead. Can someone please provide guidance on how to properly displ ...

The website shifts as you navigate to a new page

Could use some insight on an issue with my website . Whenever I navigate to a different page, like the "Rules" page from the main site, the container seems to shift down slightly. Any ideas on what could be causing this? I've been struggling to pinpoi ...

"Sticky Top Button That Stays in Place When Scrolling | Innovative CSS & jQuery

I've been inspired by the "Proceed to checkout" button on amazon.com and I want to recreate it. However, I'm facing a challenge as their website is not responsive and I can't find a way to view a device user agent in Chrome. To see what I&ap ...

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

While utilizing this code, CSS and Javascript are disabled (only HTML loads): function loadContent(limit) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status ...

How should one properly close off list items?

When I attempted to check the validity of my code on W3 validator, it highlighted errors referencing - No li element in scope but a li end tag seen. This pertains to a bootstrap dropdown menu that I came across in some examples provided by Bootstrap. Coul ...

A horizontal navigation bar featuring a centrally aligned vertical layout and full-height display

I want to align everything on my menu bar vertically in the center, with the a elements taking up 100% of the available height of the menubar (text would be vertically-centered). However, I do not want to fix the height of my menu bar. (If I were to fix th ...

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

Attempting to display a brief description when hovering over a particular project image

My goal on is to display a description when hovering over a portfolio image by setting the opacity to 1. However, this functionality seems to not be working. .description { display: block; opacity: 0; text-align: left; height: 130px; padding- ...

Mobile devices not displaying background images correctly

My Wordpress website has a section with the code below, but the image is not adjusting properly on mobile phones. Can you provide some advice? .one_half_bg { width: 50%; float: left; background-position: 50% 50% !important; backgroun ...

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

Align the Vuetify v-btn to the right in a horizontal layout

I'm having trouble aligning a v-btn to the right side. Despite trying various options, I can't seem to get it to work. I just want to know the simplest way to ensure that the register button is positioned at the very right of the column. For the ...

Validating fields using JavaScript and HTML

I'm having an issue with the code below because it only allows me to log in with the user and password from the last position of the arrays. I want it to let me login with each user and their corresponding password, for example, user at position 1 wit ...