The application of border-collapse in CSS is ineffective

I'm currently facing an issue with my inner table displaying borders.

Within the provided HTML, specifically for the table

<table class="billing_history" id="billing_history0" >
, I am attempting to have only top and bottom borders for the rows but haven't been successful. It seems that many border properties are not applying to the table. Despite trying to set border-collapse: collapse; in the CSS, it doesn't seem to affect the inner table. However, directly setting the style tag within the table itself (e.g.,
style="border-collapse: collapse;"
) does work. This raises the question why border-collapse: collapse; in the CSS isn't applying to the inner table while other properties like font-size: 11px; do apply.

If anyone has any insights or suggestions, please share them! The HTML and CSS code snippets are detailed below...

Here is the HTML:

<table id="bill-list">
    <thead>
        <tr>
            ... (omitted for brevity) ...
        </tbody>
    </table>

And the accompanying CSS:

.search_details
{
    ... (CSS details omitted) ...
}

#bill-list
{
    ... (more CSS details omitted) ...
}
... (additional CSS rules omitted) ...

Answer №1

What if we try enabling border collapse for

#bill-list #bill table

The effect of border-collapse is limited to the table element, not the td element as per the information from Mozilla documentation.

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

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

Transform the appearance of the navigation bar background upon scrolling in Bootstrap

I am trying to change the background color of my navigation bar from transparent to black when scrolling. I want it to function like this template: . Previous attempts using solutions from How to Change Navigation Bar Background with Scroll? and Changing n ...

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

Switch the background color when a radio button is chosen

For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...

Utilizing XSLT to Embed a YouTube Video and Modify the SRC Attribute

Hey, I'm having trouble embedding a YouTube video in XSLT. The page loads fine with all the data except for the video embed. When I tried changing just the source attribute, the whole XSLT failed to load. I found a workaround here , which fixed the lo ...

Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got: [li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0) <html> ...

How can I stop jQuery mobile from updating the document title?

It appears that jQuery mobile automatically uses the text content of data-role="header" to set the document.title. For example: <div data-position="fixed" data-role="header"> <h1>This text</h1> </div> To work around this, I ha ...

What exactly does the ::before pseudo-element accomplish?

After reviewing the documentation, I believe I have a good grasp of the purpose of ::before and ::after. It seems that they are typically used in conjunction with other elements. However, the webpage I am examining contains the following code: <body> ...

What is the best way to transform the data received from this function into a DataTable that can be used with the Google Charts API?

Is there a way to easily convert the data returned by this function into a format that Google Charts API can read? public function ajax_get_dates(){ $data = ([['date1' => '04/08/2016'], ['date2' => '05/08/2016& ...

"Top navigation element and anchors now have a permanent fix in place

Having some trouble with the CSS here - anchor links are getting hidden behind the navigation bar. Any ideas on how to fix this? Do you have a suggestion for making sure the anchor link text is visible just below the navigation bar? /* adjust the style a ...

Revamping HTML with AngularJS Directive: Enhancing the Layout with New Angular Attributes

I am currently facing an issue with the compiler not recognizing a new attribute I have added in a directive. In my Angular TypeScript code, I have the following setup: public class MyDirectiveScope: ng.IScope { foo: boolean; } public class MyDirecti ...

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

What is the best way to apply padding to the top of a div when it is positioned below another div?

Observing the minimal spacing between the divs AboutDogs and AboutCats, I decided to apply padding-top: 20px to the AboutCats to create a visual distinction. However, I encountered a scenario where only AboutCats exists without any other div above it. In ...

Label alignment in one line with responsive checkbox

Could someone assist me with adjusting the alignment of this checkbox when resizing the window for mobile view? The label text is breaking into a new line while the checkbox remains in its original position. How can I make the checkbox align closer to its ...

Tips for disabling modal scrolling on mobile when scrolling the div inside it

Currently, I am facing an issue with a bootstrap modal. I have created a div with overflow:auto inside the modal. Everything works fine on desktop, but on mobile devices, when I scroll the content of the div, the modal itself also scrolls. How can I preven ...

Unable to conceal HTML5 video in mobile devices through media query

I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...

The combination of jQuery, JSON, PHP, and HTML is failing to display

I am currently working on implementing Jquery with JSON to retrieve results and replace a DIV with the class alert. I am aware that JavaScript uses alert as well, so I plan to change that in the future. However, I am facing a roadblock at the moment. ...

Guide on adding up the value of a property within an array of objects using AngularJS

I am receiving an array of results from a Node.js API in my Angular app, and here is how it looks: <div *ngFor="let result of results"> <div *ngIf="result.harmattan.length > 0"> ... </div> <br> .. ...

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

Use Jquery to modify the value of a data attribute when a key is released

When I am adding some HTML to a document, one part includes a text input field. My goal is to update the value of the closest li element's data attribute whenever information is typed into this input field. Unfortunately, this functionality is not cu ...