Overlapping borders create a unique style for bootstrap labels

Below is a snippet of code with div elements that each have a 1px border defined in the labelStyle class.

.labelStyle {
    text-align: left; 
    padding: 0px; 
    font-weight: 0px;
    font-size: 8px;
    border: 1px solid;
    margin-bottom: 0;
    border-collapse: collapse;
}


<div class="col-sm-6" style="padding-left: 0px;padding-right: 2px;">
    <div class="row">
        <label class="col-sm-6 labelStyle">Name</label>
        <label class="col-sm-6 labelStyle">{{name}}</label>
    </div>
    <div class="row">
        <label class="col-sm-6 labelStyle">Number</label>
        <label class="col-sm-6 labelStyle">{{num}}</label>
    </div>
    <div class="row">
        <label class="col-sm-6 labelStyle">Zip</label>
        <label class="col-sm-6 labelStyle">{{zip}}</label>
    </div>  
</div>

After rendering, the adjacent labels appear darker due to having borders on all sides. I attempted to use the border-collapse property but it did not work as intended. I aim to achieve a sort of border-collapse functionality where each label has top and side borders defined, without a bottom border. However, the last label should have a bottom border. What would be the most effective approach to implement this? It is important to note that these elements are contained within a DIV, not a table.

Answer №1

The border-collapse CSS property determines whether cells within a <table> share borders or have separate borders. (MDN)

If you are not working with tables, you can adjust the margin-top to -1px to hide the duplicated 1px border (if you make changes, also update margin-top).

div {border: 1px solid black; margin-top: -1px;}
<div>bla bla bla 1</div>
<div>bla bla bla 2</div>
<div>bla bla bla 3</div>
<div>bla bla bla 4</div>
<div>bla bla bla 5</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

Utilize CSS to create a visual buffer at the bottom of the header

I'm having trouble creating a gap between the bottom of "headermenu" and the top of "list". No matter what values I use for margin-bottom or padding-bottom, the table won't budge. I could try adding margin-top to the table, but I would prefer to ...

Unable to execute xmlHttp.responseXML on a server that is offline

Currently, I am diving into the world of AJAX and XML. However, I recently encountered a frustrating issue. I attempted to create a basic program that would display everything I input into an input box within a <div>. Strangely enough, my program fa ...

Deactivate the child division by the nth parent division

At the end of my question, I have included a dynamically created div structure with the id "forth-three-one". Now, I need to find a way to disable or hide the input inside this specific div. Directly using the id "forth-three-one" is not an option as it w ...

What is the best way to design a white arrow with a subtle touch of grey outlining?

Question: I am interested in creating a left-pointing arrow with a grey border. Currently, I have only managed to create a grey arrow without a border. Is there any way I can achieve this? Attached is a picture to illustrate what I'm looking for. An ...

Using CSS to break or wrap long words in text

I have a div that spans the width of the page. I'm looking to ensure that a very long word in this div breaks and wraps properly, so all the content stays within the screen width and doesn't overflow beyond 100%. Although I've attempted usi ...

Is there a way to customize the dot in a JavaFx RadioButton?

Hello fellow coding enthusiasts, I am looking to find out how I can customize the color of a RadioButton dot. I want to have 3 RadioButtons, each with a different color to represent a state. Do I need to use CSS for this task? If so, could someone please ...

A guide to adding collapsible menus to your Jekyll website

I am currently utilizing Jekyll for a static website that is hosted on GitHub (yndajas.co). My main goal is to create a collapsible menu for smaller screens or windows. Despite trying various methods, including vanilla Bootstrap code, I am facing difficul ...

loading dynamic content into an appended div in HTML using Angular

Here is the HTML code from my app.component.html file: <button mat-raised-button color="primary" mat-button class="nextButton" (click)="calculatePremium()"> Calculate </button> <div id="calcul ...

Contains a D3 (version 3.4) edge bundle chart along with a convenient update button for loading fresh datasets

I am looking to update my D3 (v3.4) edge bundling chart with a new dataset when a user clicks an 'update' button. Specifically, I want the chart to display data from the data2.json file instead of data1.json. Although I have started creating an u ...

Struggling to find a solution for altering font color with jQuery while creating a straightforward menu

I'm having trouble changing the color of the active button pressed to "color:white;"... Here is the link to the jsfiddle: http://jsfiddle.net/wLXBR/ Apologies for the clutter in the file, my css is located at the bottom of the CSS box (Foundation cod ...

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

Ways to retrieve various data elements from ajax using PHP

Can you help me with my AJAX code that retrieves data from a PHP script? I want to know how to set multiple echo variables in PHP and display them separately using AJAX without reloading the page. AJAX Code $(document).ready(function() { //el ...

The form tag needs to be assigned the form control class from Bootstrap, and the Search Input field should include a glyphicon search icon

Criteria To implement a search input field in the navigation bar, use the Bootstrap input group component with the following specifics: a. The form should be aligned to the right side of the navigation bar and the form tag should include the Bootstrap inpu ...

Unveiling the method to retrieve XML tag based on the attribute of its parent element

This snippet is a segment of XML code: <?xml version="1.0"?> <menu> <pizzas> <pizza number="0"> <title>Tomato &amp; Cheese</title> <small>550</small> <medium></medium> <large> ...

Transferring information from Database dropdown menu and jQuery DatePicker to a mySQL Database

Lately, I've been facing a challenge that I can't seem to overcome. I have a client booking form that includes a dropdown menu linked to a database containing various treatments. Additionally, I've integrated a jQuery DatePicker and I'm ...

Align the middle row using CSS Grids

I am working on creating a grid layout with a size of 4x3, and I would like the second row to be centered as the top row contains four elements. Here is an example of what I am trying to achieve: https://i.sstatic.net/FnN7s.png Check out the demo code b ...

Understanding the functionality of sessions in CodeIgniter when using AJAX

I am experiencing an issue with the Session in my code. It only works when the page is refreshed. I have a controller called ravi and the view named myview. Here is the code snippet: <?php class Ravi extends CI_Controller { public funct ...

activating the web element located using Selenium in Java

What is the best way to click on a webelement based on the data-key in the class _3d5d? Specifically, if a user inputs the value 2002, an error message should inform the user "no such year, please enter again" and allow for a re-entry of the value. If the ...

Stylish Radial Hover Effect for Images Using CSS

I am looking to create a unique effect where upon hovering over an image, color will be applied in a radial shape on a grayscaled image within a div that is pointed by the cursorhttps://i.sstatic.net/64RJv.jpg Below you can see the desired outcome compare ...

Tips for keeping several buttons in the spotlight: HTML/CSS/JS

Looking for a solution to keep multiple buttons toggled on? I'm not very familiar with JavaScript, but I know that adding a class on click won't work if there's already a class set. Maybe giving the element an ID could be a possible solution ...