基于评论的编辑

Question

有没有办法让一张桌子只有一个外边框，但不包括底行。因此，倒数第二行的下边框使其看起来像最后一行。我只能使用css作为wordpress，所以我无法改变html！看图： enter image description here

优惠券代码和更新礼篮实际上是最后一行

*****编辑***** 这是HTML（我无法编辑）

<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>

Answer 1

您可以选择倒数第二项

tr:nth-first-child {/*the first item*/
  border-bottom: 2px solid black
}
tr:nth-last-child(2) { /*the second-last item*/
  border-bottom: 2px solid black
}
tr:not(:last-child){/* all but not the last */
  border-left: 2px solid black;
  border-right: 2px solid black
}

Answer 2

表格周围的边框将无法排除最后一行。您可以删除最后一行并将其替换为另一个元素（如div或其他表）。

或者您可以使用此解决方法：

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;
}

DEMO

基于评论的编辑

我添加了表头行。

我发现border-collapse: collapse和border-radius没有合在一起。相反，您需要将cellspacing="0"添加到表格的HTML标记中。

table {
    /*border-collapse: collapse;*/
    /* border-collapse and rounded borders
    don't go togehter, instead add
    cellspacing="0" to your table*/
}
table tr:first-child th { /* first row */
    border-top: 1px solid black;
}
table tr:nth-last-child(2) td { /* second 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, expect the last */
    border-left: 1px solid black;
}
table tr:nth-last-child(n+2) td:last-child, 
table thead tr th:last-child { /* all right cells, expect the last */
    border-right: 1px solid black;
}
table tr:first-child th:first-child { /* cell left top */
    border-radius: 10px 0 0 0;
}
table tr:first-child th:last-child { /* cell right top */
    border-radius: 0 10px 0 0;
}
table tr:nth-last-child(2) td:first-child { /* cell left bottom */
    border-radius: 0 0 0 10px;
}
table tr:nth-last-child(2) td:last-child { /* cell right bottom */
    border-radius: 0 0 10px 0;
}

UPDATED Fiddle
Fiddle with your exact HTML structure

表格外边框不包括最后一行

2 个答案:

基于评论的编辑