exclude the outer border from the last row of the table

Question

exclude the outer border from the last row of the table

Is it possible to create a table with only an outer border and exclude the bottom row, so that the bottom border of the second last row gives the appearance of being the final row? I am limited to using CSS as this is on Wordpress and I cannot make changes to the HTML. Please refer to the image below:

The "coupon code" and "update basket" sections actually represent the final row.

***** EDIT ***** Here is the HTML (that cannot be edited):

<table class="shop_table cart" cellspacing="0">
    <thead>
        <tr>
            <th class="product-remove">&nbsp;</th>
            <th class="product-thumbnail">&nbsp;</th>
            <th class="product-name">Product</th>
            <th class="product-price">Price</th>
            <th class="product-quantity">Quantity</th>
            <th class="product-subtotal">Total</th>
        </tr>
    </thead>
    <tbody>

                        <tr class="cart_item">

                    <td class="product-remove">
                        <a href="http://uc.petekirkwood.co.uk/basket/?remove_item=02522a2b2726fb0a03bb19f2d8d9524d&amp;_wpnonce=967f1478b0" class="remove" title="Remove this item">×</a>                   </td>

                    <td class="product-thumbnail">
                        <a href="http://uc.petekirkwood.co.uk/shop//tedbaker/test-product-copy"><img width="180" height="135" src="http://uc.petekirkwood.co.uk/wp-content/uploads/2015/04/TedBaker_TravelDocHolderCoral_5-180x135.jpg" class="attachment-shop_thumbnail wp-post-image" alt="TedBaker_TravelDocHolderCoral_5"></a>                  </td>

                    <td class="product-name">
                        <a href="http://uc.petekirkwood.co.uk/shop//tedbaker/test-product-copy">Test Product (Copy) </a>                    </td>

                    <td class="product-price">
                        <span class="amount">£10.00</span>                  </td>

                    <td class="product-quantity">
                        <div class="quantity"><input type="number" step="1" min="0" name="cart[02522a2b2726fb0a03bb19f2d8d9524d][qty]" value="3" title="Qty" class="input-text qty text" size="4"></div>
                    </td>

                    <td class="product-subtotal">
                        <span class="amount">£30.00</span>                  </td>
                </tr>
                        <tr>
            <td colspan="6" class="actions">

                                    <div class="coupon">

                        <label for="coupon_code">Coupon:</label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code"> <input type="submit" class="button" name="apply_coupon" value="Apply Coupon">


                    </div>

                <input type="submit" class="button" name="update_cart" value="Update Basket">


                <input type="hidden" id="_wpnonce" name="_wpnonce" value="967f1478b0"><input type="hidden" name="_wp_http_referer" value="/basket/?removed_item=1">         </td>
        </tr>

            </tbody>
</table>

css wordpress

Answer 1

Answer №1

To choose the penultimate selection

tr:nth-first-child {/*the first choice*/
  border-bottom: 2px solid black
}
tr:nth-last-child(2) { /*the second-to-last selection*/
  border-bottom: 2px solid black
}
tr:not(:last-child){/* everything except for the last one */
  border-left: 2px solid black;
  border-right: 2px solid black
}

Answer 2

To choose the penultimate selection

tr:nth-first-child {/*the first choice*/
  border-bottom: 2px solid black
}
tr:nth-last-child(2) { /*the second-to-last selection*/
  border-bottom: 2px solid black
}
tr:not(:last-child){/* everything except for the last one */
  border-left: 2px solid black;
  border-right: 2px solid black
}

Answer 3

Answer №2

If you're having trouble with the table border not excluding the last row, consider removing that row and replacing it with a different element such as a div or another table.

Alternatively, you can try this workaround:

table {
    border-collapse: collapse;
}
table tr:first-child td,
table tr:last-child td {
    border-top: 1px solid black;
}
table tr:nth-last-child(n+2) td:first-child {
    border-left: 1px solid black;
}
table tr:nth-last-child(n+2) td:last-child {
    border-right: 1px solid black;
}

Check out the DEMO here!

UPDATE based on feedback

I have included the table header row now.

It was discovered that using border-collapse: collapse and border-radius together is problematic. Instead, add cellspacing="0" to your table's HTML tag.

table {
    /*border-collapse: collapse;*/
    /* To use rounded borders and border-collaspe together,
    add cellspacing="0" to your table */
}
table tr:first-child th { /* for the first row */
    border-top: 1px solid black;
}
table tr:nth-last-child(2) td { /* second-to-last row */
    border-bottom: 1px solid black;
}

table tr:nth-last-child(n+2) td:first-child,
table thead tr th:first-child { /* all left cells, except the last one */
    border-left: 1px solid black;
}
table tr:nth-last-child(n+2) td:last-child, 
table thead tr th:last-child { /* all right cells, except the last one */
    border-right: 1px solid black;
}
table tr:first-child th:first-child { /* top-left cell */
    border-radius: 10px 0 0 0;
}
table tr:first-child th:last-child { /* top-right cell */
    border-radius: 0 10px 0 0;
}
table tr:nth-last-child(2) td:first-child { /* bottom-left cell */
    border-radius: 0 0 0 10px;
}
table tr:nth-last-child(2) td:last-child { /* bottom-right cell */
    border-radius: 0 0 10px 0;
}

UPDATED Fiddle Available Here!
Fiddle specific to your HTML structure

Answer 4

If you're having trouble with the table border not excluding the last row, consider removing that row and replacing it with a different element such as a div or another table.

Alternatively, you can try this workaround:

table {
    border-collapse: collapse;
}
table tr:first-child td,
table tr:last-child td {
    border-top: 1px solid black;
}
table tr:nth-last-child(n+2) td:first-child {
    border-left: 1px solid black;
}
table tr:nth-last-child(n+2) td:last-child {
    border-right: 1px solid black;
}

Check out the DEMO here!

UPDATE based on feedback

I have included the table header row now.

It was discovered that using border-collapse: collapse and border-radius together is problematic. Instead, add cellspacing="0" to your table's HTML tag.

table {
    /*border-collapse: collapse;*/
    /* To use rounded borders and border-collaspe together,
    add cellspacing="0" to your table */
}
table tr:first-child th { /* for the first row */
    border-top: 1px solid black;
}
table tr:nth-last-child(2) td { /* second-to-last row */
    border-bottom: 1px solid black;
}

table tr:nth-last-child(n+2) td:first-child,
table thead tr th:first-child { /* all left cells, except the last one */
    border-left: 1px solid black;
}
table tr:nth-last-child(n+2) td:last-child, 
table thead tr th:last-child { /* all right cells, except the last one */
    border-right: 1px solid black;
}
table tr:first-child th:first-child { /* top-left cell */
    border-radius: 10px 0 0 0;
}
table tr:first-child th:last-child { /* top-right cell */
    border-radius: 0 10px 0 0;
}
table tr:nth-last-child(2) td:first-child { /* bottom-left cell */
    border-radius: 0 0 0 10px;
}
table tr:nth-last-child(2) td:last-child { /* bottom-right cell */
    border-radius: 0 0 10px 0;
}

UPDATED Fiddle Available Here!
Fiddle specific to your HTML structure

exclude the outer border from the last row of the table

Answer №1

Answer №2

UPDATE based on feedback

Similar questions

Can you please provide the CSS code that would style this table in a similar manner?

arranging three divs in a row, with one div expanding to fill the entire height while the other two divs evenly split the remaining

Optimizing mobile page layouts with CSS

Legend alignment issue in Firefox disrupting Flexbox functionality

My website is currently experiencing issues with all of the CSS references not working. This problem applies to both external and internal CSS files and consistently

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

Transform website code into email-friendly HTML code

What is preventing me from accessing the hidden article using the URL with the hashname?

Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Tips for updating the styleurls link dynamically by clicking a button and maintaining the changes

What could be causing the styled-component's flex value to not update?

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

How can the output directory of the CSS file generated by Compass/Webby be modified?

Div containing scrollable content with overlaid child element

The error occurred at line 12 in the app.js file, where it is unable to access properties of an undefined object, specifically the 'className' property. This occurred within an anonymous function in an HTMLDivElement

Move the menu position in Bootstrap 4 navbar

Switching downlink to top link when scrolling downwards

Is there a way to showcase specific page categories in Wordpress?

Having problems with Javascript and CSS not playing well together?

I would like to terminate the property when processing it on a mobile device