Issue with applying border-top on <tbody> in CSS

I can't figure out why the style for the <tbody> element isn't taking effect: (jsfiddle). Any ideas on what might be going wrong? 

<!DOCTYPE html><html>
<head>
    <title>Test</title>
</head>
<body>
    <table class="basket">
        <tr class="head">
            <th class="title">Product</th>
            <th class="price">Unit Price</th>
            <th class="quantity">Quantity</th>
            <th class="total">Total</th>
        </tr>
                    <tr class="item">
            <td class="title"><a href="#">Product 1</a></td>
            <td class="price">&pound;0.30</td>
            <td class="quantity"><input value="2"/></td>
            <td class="total">&pound;0.60</td>
        </tr>
        <tbody class="ordersummary" style="border-top: 3px solid blue;">
            <tr class="subtotal">
                <td colspan="3" class="label">Subtotal</td>
                <td class="value">&pound;0.60                       </td>
            </tr>
            <tr class="shipping">
                <td colspan="3" class="label">Shipping</td>
                <td class="value">&pound;0.00</td>
            </tr>
            <tr class="total">
                <td colspan="3" class="label">Total</td>
                <td class="value">&pound;0.60</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
htmlcsshtml-table

Answer №1

Interactive Demo

Make sure to include the following CSS rule:

.table {border-collapse: collapse;}

Additionally, it's recommended to keep your styles separate from your content by using an external stylesheet.

Another Approach

Try adding this:

display:block;

To the tbody element in your HTML structure.

Answer №2

Here's a potential solution:

tbody > tr:first-child > td {
    border-top: 3px solid blue;
}

However, it's important to note that traditional CSS rules for styling HTML elements may not always apply when working with tables.

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

determine the height of div element for A4 size paper dimensions

Is there a way to calculate how many A4 papers would fit into a div on my website? I am aware that the size of an A4 paper in pixels varies depending on the screen's DPI. I am exploring methods to determine the user's screen DPI, convert it to A4 ...

javascriptjquerycss

The linear gradient feature in asp.net does not function properly on Internet Explorer versions 6 through 8

After running the following code below, it appears that the linear gradient is not functioning properly in IE6 to IE8. background-image: linear-gradient(45deg, white 0%, gray 50%, black 100%); I attempted to resolve this issue by adding the code snippet ...

asp.netcssinternet-explorer-8linear-gradients

Issues with Highchart resizing within an AngularJS environment

Incorporating Highcharts into my angularjs app to display statistics has been successful. The graph appears correctly upon page load. However, when I adjust the orientation, the appearance changes and then switching back from landscape to portrait result ...

cssangularjshighcharts

Height setting for an ASP.NET UpdateProgress widget

In my ASP.NET Project, I am facing an issue with the UpdateProgress. I need the UpdateProgress to adjust its height dynamically based on the content within the UpdatePanel. I attempted to use a JQuery script to accomplish this, but the script does not run ...

javascriptjqueryasp.nethtml

How can you send the slider value when the mouse leaves, as opposed to sending all values continuously until the mouse leaves?

I have an input field and a slider with a range between 1 to 100. Instead of using a submit button, I have onChange events for each field, including the slider, due to toggle switches and drop downs. However, I am facing an issue where when trying to chan ...

javascripthtmlnode.jsreactjsslider

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

After clicking submit and attempting to retrieve text from the textarea, I am encountering a problem where the text appears blank. The reason for this issue eludes me. function textSubmit() { var text = $("#noise").val(); console.log(text); consol ...

javascripthtmltextareatext-editor

Displaying a background image in Laravel using the storage directory

Can anyone offer some guidance on how to load a background image from storage? I have tried using the following code with normal img src, but it doesn't seem to work with background images. background-image: url({{ Storage::get("{$post->image}") } ...

csslaravellaravel-5eloquent

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

htmlangular

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

javascripthtmltypescriptazureazure-functions

Steps for creating a link click animation with code are as follows:

How can I create a link click animation that triggers when the page is loaded? (function () { var index = 0; var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); function start() { boxes.eq(index).addClass('animat ...

javascriptjquerycss

Steps to retrieve the chosen value and visible text from a dropdown menu when clicking a button in Angular version 7

When the button is clicked, I want to display the selected text (green..) and value (1..) from a dropdown select. I attempted using ngmodel but was only able to capture the value, and an empty option is appearing in the select field. Below is the provide ...

htmlangulartypescript

Using HTACCESS to eliminate the .html extension from URLs

I have URLs in the following format: site.com/user.html?id=2 site.com/user.html All I want is to return the same page without the ".html" extension, like this: site.com/user If there is anything after ".html" I need to add a forward slash: site.com/u ...

htmlapache.htaccessurl

Is there a tool available for iOS that can encode HTML?

While parsing XML, I encountered a link with accented characters like the one below: http://sale.images.woot.com/Château_de_Brigue_French_RoséhknStandard.jpg iOS seems to have trouble loading images with accented characters in the URL. When I manuall ...

htmliosimagexml-parsingurl-encoding

Transform the input value into a string

Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...

javascripthtml

Tips for updating the innerHTML of a dynamically generated option form element

Struggling with setting the innerHTML of an option form element, encountering issue where generated options lack values. <script src="jq.js"></script> <script> $(function(){ var num = 0; $('#gen_select').click(functio ...

javascriptjqueryhtml

Steps to toggle the visibility of a table by clicking on a plus or minus button

//Custom Table Display Script using JQuery $(document).ready(function(){ $('.table1').on('click',function(){ $('.table1shw').show(); }); }); //A ...

javascripthtmljquerycssbootstrap-4

When importing scss files in Bootstrap 4, the generated file may differ from the original one found on the official getbootstrap.com

I am utilizing node-sass for my current project. If you want to experiment, create a simple style.scss file with both versions (alpha6 and beta): @import "./node_modules/bootstrap/scss/bootstrap"; then enter the following command: node-sass style.scss ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-modalbootstrap-4

The disappearing background of a div is causing a ripple effect on the other divs layered on top of the

I'm facing an issue with my main div that has a background image filling the screen. While I've managed to make the image change constantly, the problem arises when the divs on top of the background div also fade out, making the whole page go bla ...

jqueryhtmlcss

Displaying an array value instead of a new value list in a React component

Situation - Initial number input in text field - 1 List of Items - 1 6 11 Upon removing 1 from the text field, the list becomes - New List Items - NaN NaN NaN Now, if you input 4 in the field. The updated List Items are - NaN NaN 4 9 14 Expected ...

javascripthtmlcssreactjsreact-usecallback