Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly appreciated. Thank you!

Here is the current output:

This is the desired appearance:

Edit: Below is the code snippet (it's from a woocommerce order page)

<tr class="order">
    <td class="order-number" data-title="<?php _e( 'Order Number', 'woocommerce' ); ?>">
        <a href="<?php echo esc_url( $order->get_view_order_url() ); ?>">
            #<?php echo $order->get_order_number(); ?>
        </a>
    </td>
    <td class="order-date" data-title="<?php _e( 'Date', 'woocommerce' ); ?>">
        <time datetime="<?php echo date( 'Y-m-d', strtotime( $order->order_date ) ); ?>" title="<?php echo esc_attr( strtotime( $order->order_date ) ); ?>"><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></time>
    </td>
    <td class="order-status" data-title="<?php _e( 'Status', 'woocommerce' ); ?>" style="text-align:left; white-space:nowrap;">
        <span><?php echo wc_get_order_status_name( $order->get_status() ); ?></span>
    </td>
    <td class="order-total" data-title="<?php _e( 'Total', 'woocommerce' ); ?>">
        <span><?php echo sprintf( _n( '%s for %s item', '%s for %s items', $item_count, 'woocommerce' ), $order->get_formatted_order_total(), $item_count ); ?></span>
    </td>
    <td class="order-actions">
        <?php
            $actions = array();

            if ( in_array( $order->get_status(), apply_filters( 'woocommerce_valid_order_statuses_for_payment', array( 'pending', 'failed' ), $order ) ) ) {
                $actions['pay'] = array(
                    'url'  => $order->get_checkout_payment_url(),
                    'name' => __( 'Pay', 'woocommerce' )
                );
            }

            if ( in_array( $order->get_status(), apply_filters( 'woocommerce_valid_order_statuses_for_cancel', array( 'pending', 'failed' ), $order ) ) ) {
                $actions['cancel'] = array(
                    'url'  => $order->get_cancel_order_url( wc_get_page_permalink( 'myaccount' ) ),
                    'name' => __( 'Cancel', 'woocommerce' )
                );
            }

            $actions['view'] = array(
                'url'  => $order->get_view_order_url(),
                'name' => __( 'View', 'woocommerce' )
            );

            $actions = apply_filters( 'woocommerce_my_account_my_orders_actions', $actions, $order );
            if ( $actions ) {
                foreach ( $actions as $key => $action ) {
                    echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
                }
            }
        ?>
    </td>                           
</tr>

Answer №1

Include a border on the bottom of "td" with a dotted style.

  border-bottom:1px dotted #000;

Answer №2

Kindly insert the following code.

border-collapse: collapse;
border-top: 1px dashed color;

Answer №3

Controlling the length of a border on any element is not possible...
Instead, you have the option to manage the width of the element itself and then add the property border-bottom.

If you require the element to not occupy the entire available width, you can utilize margin in combination with display (particularly for tables)

For example:

td {
    margin: 10px;                    <-- creates space between cell and border
    display: inline-block;           <-- changes default "table-cell"
    border-bottom: 1px dotted #999;  <-- adds dotted bottom border
}

Check out this demonstration: http://jsfiddle.net/gmolop/jn846ypv/

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

What is causing the button to prevent file selection?

What's causing the button to not allow file selection when clicked on? Interestingly, placing a span or div in the label enables file selection upon clicking them, but not with the button. <html> <body> <label> <input t ...

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

While everything is functioning perfectly in Firefox and IE, I've encountered an issue with Chrome. It only works after right-clicking and inspecting the element; once I close the Inspector, it stops working - displaying just an arrow cursor as if the ...

Switch out fontawesome icons for SVG icons

I'm looking to replace the Fontawesome icons on this template. The full HTML code is available here, but I only need to swap out one specific icon with an SVG. https://i.sstatic.net/k1DFZ.png <div class="col-md-4"> ...

Using ng-bind-html within a ng-repeat loop

Currently, I am working on developing a custom autosuggest feature where a web service is queried with a search term to retrieve a list of suggestions that are then displayed. My main obstacle lies in trying to highlight the matching term within the sugges ...

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...

Ways to verify if a particular value is included in a list

I am faced with a situation where I need to display different content in HTML based on the presence of a specific value ("sign_change_global") in a JSON loaded from a server. I believe this issue can be resolved within HTML only, but I also wonder if there ...

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

When creating a table, I utilize ng-repeat to generate table rows. Whenever the dropdown changes, a function is triggered which applies certain conditions. Based on these conditions, an object is added to an array that is bound to a scope variable. Here i ...

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

Updating the style sheet of a selected menu item on an ASP.NET master page

I created an asp.net master page with a menu setup like this: <menu id="menu"> <nav id="main_nav"> <ul id="menu-primary"> <li ><a href="./">Home</a></li> <li><a href="staff.aspx"& ...

Using CSS styles in emails can lead to an unexpected horizontal scrolling effect

I am currently working on an application using Symfony, and I have implemented a basic confirmation email with minimal CSS styling. However, the email template is causing horizontal scrolling due to the layout. Below is the HTML code of my email template: ...

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

Rotating out of the element with the transform rotate effect

I have rotated the text by 270 degrees and now I am facing the challenge of aligning it within another div. Here is the original image before I rotated the text: Below is the code I used for the layout: #infoside { background-color: #00ff00; flo ...

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

Unsure how to proceed with resolving lint errors that are causing changes in the code

Updated. I made changes to the code but I am still encountering the following error: Error Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. It is recom ...

What is the purpose of text-indent when using image replacement techniques?

I've implemented the code below for my primary menu a links: #sliding-navigation #filter-regista a { width: 75px; height: 29px; background: transparent url("images/directors.png") no-repeat 0 0; text-indent: -9999px; } Appreciate any ...

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

What's preventing canvas from working offline but functioning properly on the TRYIT platform?

I have created some canvas-related code that works perfectly on TRYIT editor, but it fails to work locally when I copied the code into a file and tried to run it. This code is designed to take an image, set the width and height of a canvas based on that i ...

Combining Flask with npm: A Comprehensive Guide

I have a unique flask application that initiates with python3 app.py running on localhost:5000 Moreover, there is another distinct nodejs program that kicks off with npm run start which operates on localhost:3000 The challenge that lies ahead for m ...

Exploring elements in Javascript

I am attempting to retrieve values from various elements when a 'a' element is clicked. Consider the following code: <tr data-id="20"> <div class="row"> <td> <div class="btn-group"> <a data-checked= ...

Adjust the dimensions of a box by simultaneously altering both its height and width

I am looking to create a responsive box that automatically adjusts its height when the window width is resized. I have tried using Transform:Translate() to move the picture inside, but so far, the height only changes when I manually adjust the height of ...