Why Border of <Th> and <Thead> Both Not Showing Here

Why border of th and thead both not showing here?

It's the expected behaviour. Odd, but expected.

The borders are collapsing, and the thicker one prevails.

You can see it with this example: the touching borders on first row collapse, the ones on the second row don't.

On the first row the first cell gets the thicker border (10px green > 5px red), and the second cell gets the thicker border (5px red > 3px green).

On the second row there are no "adjoining" borders to collapse, so the 10px green and 3px green borders show up normally.

<table>
<thead style="border-top:5px solid red; background:yellow">
  <tr>
    <th style="border-top:10px solid green">Name</th>
    <th style="border-top:3px solid green">Name</th>
  </tr>
  <tr>
    <th style="border-top:10px solid green">Name</th>
    <th style="border-top:3px solid green">Name</th>
  </tr>
</thead>
</table>

Need me to clear up the explanation anyhow?

PS: theoretically you could use the border-collapse property on the table to prevent that, but I'm not managing.

Also, the default value seems to be not to collapse.

Further reading: http://www.w3.org/TR/CSS2/tables.html#borders

Table borders not showing up

Either move the border-bottom rule to the th and td tags or use collapsing border model (border-collapse: collapse;) for the .table

.table {
    border-collapse: collapse;
}

http://codepen.io/anon/pen/BNmOgg

Table borders not showing correctly

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>

css border not showing but css is applied

tr need its table to have border-collapse: collapse for border to work

table.first {    border-collapse: separate;     /*  property default  */}table.second {    border-collapse: collapse;}
table thead tr {    border-bottom: 2px solid gray;}
/*  for this demo only  */div {  margin: 25px 20px 10px;  text-decoration: underline;}

<div>This table's tr (in thead) has no border</div>
<table class="first">  <thead>    <tr>      <td>Left Head</td>      <td>Right Head</td>    </tr>  </thead>  <tbody>    <tr>      <td>Left</td>      <td>Right</td>    </tr>  </tbody></table>
<div>This table's tr (in thead) has border</div>
<table class="second">  <thead>    <tr>      <td>Left Head</td>      <td>Right Head</td>    </tr>  </thead>  <tbody>    <tr>      <td>Left</td>      <td>Right</td>    </tr>  </tbody></table>

Border style do not work with sticky position element

The problem occurs because of the use of border-collapse: collapse. When browsers collapse the borders, the top and bottom border on the <th> must be getting applied to surrounding elements—the top border to the <table> and the bottom border to the following <tr>.

If you use border-collapse: separate and fashion your borders to sit on one side, the borders will truly attach to the <th>, stay fixed as expected, and appear collapsed.

Here are example styles that can be applied to your HTML snippet.

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>

IE 10 Missing border segments while printing table elements

I came across a similar issue in IE 9. The top half of the border on the first row of the first table on a page would not appear on the paper version of the page. When I load your code I see the same symptom.

I worked around our problem by combining the border rules for the table, th, and td into a single rule. The trick appears to work for yours as well, but it means the outer border will be the same size as the inner border:

    table {
            border-collapse: collapse; 
    }

    table, th, td {
            border: 1px solid black;
    }

Table headers position:sticky and border issue

You can add

.table {
  border-collapse: separate;
}

But unfortunately it looks bad, a better solution will be adding a workaround using a pseudo-element.

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

.table-sticky-container {
  height: 200px;
  overflow-y: scroll;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}

.table-sticky th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid red;
}

th:after {
  bottom: -1px;
  border-bottom: 2px solid red;
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>

<div class="table-sticky-container">
    <table class="table table-sticky">
      <thead class="thead-light">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Title</th>
          <th scope="col">ID</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Malcolm Reynolds</td>
          <td>Captain</td>
          <td>9035749867</td>
          <td>mreynolds</td>
        </tr>
        <tr>
          <td>Zoe Washburne</td>
          <td>First Officer</td>
          <td>8908980980</td>
          <td>zwashburne</td>
        </tr>
        <tr>
          <td>Kaylee Frye</td>
          <td>Engineer</td>
          <td>6678687678</td>
          <td>kfrye</td>
        </tr>
        <tr>
          <td>Malcolm Reynolds</td>
          <td>Captain</td>
          <td>9035749867</td>
          <td>mreynolds</td>
        </tr>
        <tr>
          <td>Zoe Washburne</td>
          <td>First Officer</td>
          <td>8908980980</td>
          <td>zwashburne</td>
        </tr>
        <tr>
          <td>Kaylee Frye</td>
          <td>Engineer</td>
          <td>6678687678</td>
          <td>kfrye</td>
        </tr>
      </tbody>
    </table>
  </div>

Table borders in IE (8,9 & 10) not showing

I suggest removing position:relative, in part because it doesn't do anything for a cell and in part from pure IE-fear (it does weird things with positioning).

In addition to that, try Binita's answer. Instead of two shorthand declarations, though, try:

border: 1px solid #ccc;
border-width: 1px 0;

Why Border of <Th> and <Thead> Both Not Showing Here