CODEWITHSUNDEEP
htmlcsshtml-table
wickywills
wickywills

Reputation: 4204

Table borders not showing correctly

I am currently trying to get bottom borders on each row within a table, however they don't quite touch the outer border I have on the table. There seems to be some odd spacing between the tr and the table tags, but I can't quite work out what it is.

I have tried playing around with the various table CSS properties (border-collapse, border-spacing), but still can't seem to remove this gap.

enter image description here

#order_review .shop_table_wrap {
  border: 1px solid #e1e1e2;
  box-shadow: 0 0 0 6px #f6f6f6;
  margin-bottom: 60px;
}

#order_review .shop_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0px;
}

#order_review .shop_table th {
  color: #2566AC;
}

#order_review .shop_table thead {
  background: #e9eff7;
  border: 10px solid #fff;
}

#order_review .shop_table thead th {
  text-align: left;
  padding: 16px 20px;
}

#order_review .shop_table tr td,
#order_review .shop_table tr th {
  padding: 16px 20px;
  text-align: left;
}

#order_review .shop_table tr.cart_item {
  border-bottom: 1px solid #eaeaea;
}

#order_review .shop_table tfoot tr:last-child {
  background: #feece2;
  border: 10px solid #fff;
}

#order_review .shop_table tfoot tr.cart-subtotal {
  border-bottom: 2px solid #eaeaea;
}

#order_review .shop_table tfoot tr:last-child {
  text-align: left;
  padding: 16px 20px;
}

#order_review .shop_table tfoot tr:last-child th {
  padding: 16px 20px;
}

#order_review .shop_table tfoot tr:last-child td {
  padding: 16px 20px;
}
<div style="position: relative;" id="order_review">
  <div class="shop_table_wrap">
    <table class="shop_table">
      <thead>
        <tr>
          <th class="product-name">Product</th>
          <th class="product-total">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 1</strong> </td>
          <td class="product-total">
            <span class="amount">£35.00</span> </td>
        </tr>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 5</strong> </td>
          <td class="product-total">
            <span class="amount">£90.00</span> </td>
        </tr>
      </tbody>
      <tfoot>

        <tr class="cart-subtotal">
          <th>Cart Subtotal</th>
          <td><span class="amount">£125.00</span></td>
        </tr>




        <tr class="shipping">
          <th>Shipping and Handling</th>
          <td>

            Free Shipping <input name="shipping_method[0]" data-index="0" id="shipping_method_0" value="free_shipping" class="shipping_method" type="hidden">



          </td>
        </tr>







        <tr class="order-total">
          <th>Order Total</th>
          <td><strong><span class="amount">£125.00</span></strong> </td>
        </tr>


      </tfoot>

    </table>
    <!-- shop_table_wrap -->
  </div>
</div>

JSFiddle

Can anyone see where this gap is coming from, and how to remove it?

Upvotes: 1

Views: 4423

Answers (6)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

Make the following changes to CSS:

  • Remove border-collapse: collapse; from table
  • Remove border: 10px solid #fff; from thead
  • Add border: 10px solid #fff; to the thead and tfoot cells instead
  • Remove the left and right border on the relevant cells to stop them being divided in the middle
    #order_review .shop_table {
        width: 100%;
        table-layout: fixed;
        /*Remove 
        border-collapse: collapse;*/
        border-spacing: 0px;    
    }
    #order_review .shop_table thead {
        background: #e9eff7;
        /*Remove 
        border: 10px solid #fff;*/
    }
    #order_review .shop_table thead th, .order-total th, .order-total td {
        text-align: left;
        padding: 16px 10px;
        /*Add */
        border: 10px solid #fff;
    }
    /*Add */
    #order_review .shop_table thead .product-name, .order-total th {
        border-right: 0;
    }
    /*Add */
    #order_review .shop_table thead .product-total, .order-total td {
        border-left: 0;
    }


#order_review .shop_table_wrap {
  border: 1px solid #e1e1e2;
  box-shadow: 0 0 0 6px #f6f6f6;
  margin-bottom: 60px;
}

#order_review .shop_table {
  width: 100%;
  table-layout: fixed;
  /*Remove 
        border-collapse: collapse;*/
  border-spacing: 0px;
}

#order_review .shop_table th {
  color: #2566AC;
}

#order_review .shop_table thead {
  background: #e9eff7;
  /*Remove 
            border: 10px solid #fff;*/
}

#order_review .shop_table thead th,
.order-total th,
.order-total td {
  text-align: left;
  padding: 16px 10px;
  /*Add */
  border: 10px solid #fff;
}


/*Add */

#order_review .shop_table thead .product-name,
.order-total th {
  border-right: 0;
}


/*Add */

#order_review .shop_table thead .product-total,
.order-total td {
  border-left: 0;
}

#order_review .shop_table tr td,
#order_review .shop_table tr th {
  padding: 16px 20px;
  text-align: left;
}

#order_review .shop_table tr.cart_item td {
  border-bottom: 1px solid #eaeaea;
}

#order_review .shop_table tfoot tr:last-child {
  background: #feece2;
  border: 10px solid #fff;
}

#order_review .shop_table tfoot tr.cart-subtotal {
  border-bottom: 2px solid #eaeaea;
}

#order_review .shop_table tfoot tr:last-child {
  text-align: left;
  padding: 16px 20px;
}

#order_review .shop_table tfoot tr:last-child th {
  padding: 16px 20px;
}

#order_review .shop_table tfoot tr:last-child td {
  padding: 16px 20px;
}
<div style="position: relative;" id="order_review">
  <div class="shop_table_wrap">
    <table class="shop_table">
      <thead>
        <tr>
          <th class="product-name">Product</th>
          <th class="product-total">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 1</strong> </td>
          <td class="product-total">
            <span class="amount">£35.00</span> </td>
        </tr>
        <tr class="cart_item">
          <td class="product-name">
            Happy Ninja <strong class="product-quantity">× 5</strong> </td>
          <td class="product-total">
            <span class="amount">£90.00</span> </td>
        </tr>
      </tbody>
      <tfoot>

        <tr class="cart-subtotal">
          <th>Cart Subtotal</th>
          <td><span class="amount">£125.00</span></td>
        </tr>




        <tr class="shipping">
          <th>Shipping and Handling</th>
          <td>

            Free Shipping <input name="shipping_method[0]" data-index="0" id="shipping_method_0" value="free_shipping" class="shipping_method" type="hidden">



          </td>
        </tr>







        <tr class="order-total">
          <th>Order Total</th>
          <td><strong><span class="amount">£125.00</span></strong> </td>
        </tr>


      </tfoot>

    </table>
    <!-- shop_table_wrap -->
  </div>
</div>

JS Fiddle: http://jsfiddle.net/1mmw1ppu/

Upvotes: 4

Marc Audet
Marc Audet

Reputation: 46785

The two key CSS rules that are adding 10px of whitespace are the following:

#order_review .shop_table thead {
    background: #e9eff7;
    border: 10px solid #fff;
}


#order_review .shop_table tfoot tr:last-child {
    background: #feece2;
    border: 10px solid #fff;
}

If you change the 10px to 0, that will get rid of the whitespace.

See demo: http://jsfiddle.net/audetwebdesign/rmtevz8w/

Upvotes: 2

KryptonicSun
KryptonicSun

Reputation: 31

The issue is with the empty border you have:

border: 10px solid #fff;

If you remove it, the border will be as you intend.

Upvotes: 2

Manwal
Manwal

Reputation: 23816

Remove border-collapse and give border to td not tr

Css changes:

#order_review .shop_table tr.cart_item td {/*td added*/
        border-bottom: 1px solid #eaeaea;
    }

DEMO

Upvotes: 0

kamatchikumar-India
kamatchikumar-India

Reputation: 127

Remove cellspacing for the table. that small gap issues are resolved.

ex :

<table cellpadding="0" cellspacing="0" >
<tr>
<td></td>
</tr>
<table>

Upvotes: 0

Abhinav
Abhinav

Reputation: 3428

Remove border-collapse property from .shop_table class and it will be fixed.

Upvotes: 0

Related Questions