Borders appear to be missing in the card-like div layout

Despite using the same color for the outer border and inner borders, I am having trouble getting the inner borders to show up. Can anyone provide guidance on how to display both the inside and outside borders?

Note: I have attempted changing the color, but it has not resolved the issue.

<div id="card">

  <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

Find my code on JSfiddle: https://jsfiddle.net/24qLhtto/1/

jqueryhtmlcssborderbootstrap-4

Answer №1

<div id="card">

  <div style="display: table; border-collapse: collapse;  height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row;z-index:10; height: 24px; padding: 12px 20px; border: 1px solid red; background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

Check out the solution here:

https://jsfiddle.net/24qLhtto/2/

A quick fix for this issue is to simply add border-collapse: collapse; to your parent div. When using display: table;, it's important to pay attention to borders on tables.

I hope this explanation helps!

Answer №2

Give this a shot 

<div id="card">

  <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);border-collapse: collapse">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

Include border-collapse: collapse within display: table

VIEW DEMO

Answer №3

My perspective on this issue has shifted after facing some challenges: - Avoid using display:table with display: row. If you do, borders may not display correctly unless border-collapse:collapse is also used, but then border-radius won't work properly. I have found that using display:flex instead solves this problem.

Check out my solution here!

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

Tips for incorporating unique images into each individual flex box

I am new to the world of coding, having just embarked on this journey less than a week ago. Following a tutorial by a developer on YouTube, I tried to add my own twist to the project in order to differentiate it from the original. However, I've hit a ...

htmlcssflexbox

Merging quotations with a PHP and JavaScript function using jQuery

$.ajax({ type: "POST", url: <?php echo base_url().'index.php/user_management/manage_users/ViewProfile/'?>"+JSON.parse(item.UserID), success: function(output_string){ $('.second_column_content_container').html(o ...

phpjqueryajax

Personalizing Material-UI's select component: A step-by-step guide

Desired Outcome: https://i.stack.imgur.com/khNHn.png https://i.stack.imgur.com/dQzVz.png Progress So Far: https://i.stack.imgur.com/CUixn.png Struggling to Position SVG Icon Next to Text: https://i.stack.imgur.com/4GFtA.png Issue with Black Line Whe ...

csscustomizationmaterial-ui

Utilizing Jquery to Add Elements and Adjust Element Height

Encountering an unusual issue where the height of a div is not updating when content is appended to it using JQuery. To demonstrate the problem, I have created a simple JSFiddle: http://jsfiddle.net/hf66v/5/ Here is the initial HTML structure: <div i ...

jqueryhtmlcss

The replace() function is failing to replace the provided inputs

Supposedly, when a user types in certain profanity and submits it, the word is supposed to be replaced with a censored version. Unfortunately, this feature is not working as expected. The word appears uncensored. Do you think implementing if/else stateme ...

javascripthtmlvariablesreplace

What is the best way to upload images in Vue.js without using base64 formatting?

Is there a way to upload an image file without it being base64 encoded? I currently can only achieve base64 format when trying to upload an image. How can I modify the code to allow for regular file uploads? <script> submitBox = new Vue({ el: "#su ...

javascriptjqueryvue.jsvuejs2vue-component

Columns in Bootstrap4 housing elements positioned absolutely

Recently, I've been developing a game that involves using absolute positioning for certain elements. This is necessary for creating moving animations where elements need to slide around and overlap to achieve a specific effect. As I focus on optimizi ...

htmlcsstwitter-bootstrap

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

htmlcssdjangobootstrap-4

Using Jquery's $.get method to retrieve the header status in case of an error

I am in the process of developing a REST API that is designed to return a header status 400 when an error occurs. However, I have encountered an issue on the AJAX side where I am unable to access the jqxhr object that is being returned. $.get('site. ...

jqueryapirestjqxhr

Encountering a JS error that states: "Uncaught SyntaxError: missing ) after argument list" when running the following code

I keep encountering the error message: "Uncaught SyntaxError: missing ) after argument list" when I try to call the delete function within the createHtmlview function. console.log("Delete Item is being called") } ...

javascripthtml

Trouble with implementing an onclick event listener in a foreach loop

While generating and adding HTML in a for loop, I noticed that adding onclick events within the same loop is not functioning correctly: items.forEach(item => { itemHtml = `<div class="${item.id}">${item.id}</div>`; $(".it ...

javascriptjqueryonclick

Web server decides on "Multiple Options" while utilizing %3F instead of "?" in the URL

I have been using the Lazarus-IDE for a project and encountered an issue with one of its components that doesn't accept "?" in the URL for online help info. I attempted to encode "?" as "%3F" in the URL, thinking it was the correct encoding, but both ...

htmlgoogle-chromeurlfirefoxbrowser

Remove the icon disc background from a select element using jQuery Mobile

As I delve into building my first jQuery Mobile app using PhoneGap/Cordova, I have encountered some challenges along the way in getting the styling just right, but overall, things are going well. However, when it comes to working with forms, I hit a roadb ...

javascripthtmlcssjquery-mobilecordova

Issue with jQuery selector not updating when variable changes

'I am attempting to create a functionality where a function is triggered upon clicking the "hit" class, but only when the correct parent "box" id is selected. var currentSelection = 1; $('#box-' + currentSelection + ' .hit'). ...

javascriptjquery

Tips for aligning the dialog box in the center of the screen based on the current scroll position

Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...

javascripthtmlcssmodal-dialogcenter

What methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascripthtmlcss

What is the best way to insert an image into a div?

Trying to figure out how to place a flower inside the red box in my div that is overlaid on another one with a higher z-index. The picture I added doesn't seem to show up properly. Any advice on how to make this work? ...

cssimagehtml

Can you explain the distinction in JavaScript between declaring a variable with `var a = xyz[]` versus `var a = xyz

Can someone clarify the difference between the following statements in JavaScript (or jQuery)? var a = xyz[] var a = xyz{} I tried looking it up online, but couldn't find a definitive answer. If anyone knows the difference, please enlighten me. ...

javascriptjquery

Change events are not being received upon clicking the radio buttons

Hey friends, I'm trying to set up backbone events for when radio buttons are clicked. Here are the radio buttons I have: <p><label for="pays">Pays now</label><input id="pays" name="pays" type="radio" value="1" class="_100"/>&l ...

javascriptjquerybackbone.jsbackbone-events

The delete_node() function in jstree does not seem to be removing nodes

In my attempt to create a custom context menu for different nodes, I've managed to display different labels for clicks on folders or files. However, I am facing some challenges when trying to delete them. Take a look at my code snippet. Due to diffic ...

javascriptjqueryjstree