Add Border-Bottom to Table Row ≪Tr≫

Giving a border to an HTML table row, tr

You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)

Thus, you need to use collapsing borders. Example:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Add border-bottom to table row tr

I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom: 1px solid black;
}

How to set the border-bottom-style only on last row of table in HTML?

I believe your goal as follows.

You want to put the border to the bottom of the last table row.

I think that in this case, I would like to propose to set the style to <tbody> as follows.

From:

<tbody>

To:

<tbody style="border-style: none solid solid;">

Result:

When a sample value is used, your HTML becomes as follows.

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <br>Dear Mr. PIC,
  <br>
  <br>Stocktake for today for your kind perusal.
  <br>
  <br>
  <div style="background-color:#3E1176;height:3px;"></div>
  <br>

  <table style="height: 333px; width: 99.9296%;border-collapse: collapse; border-color: #3E1176; border-style: inset; margin-left: auto; margin-right: auto;" border="0">
<thead>
  <tr style="height:50px;background-color:#3E1176;text-align:center;padding:10px;color:white;font-size:15px;font-style:bold;" bgcolor="#3E1176">
    <th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 #3E1176;padding:6px;vertical-align: middle;">Description</th>
    <th style="border-top-style: solid;border-bottom-style: solid;border-width:thick;border-color: #3E1176;padding:6px;vertical-align: middle;">Qty</th>
    <th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 white;padding:6px;vertical-align: middle;">MinStock</th>
    <th style="border-top-style:solid;border-right-style:solid; border-bottom-style:solid;border-width:thick;border-color: #3E1176 #3E1176 #3E1176;padding:6px;vertical-align: middle;">MaxStock</th>
  </tr>
</thead>

<tbody style="border-style: none solid solid;">

        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a1</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:#F6EFFE;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a2</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a3</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:#F6EFFE;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a4</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a5</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
      </tbody>

<tfoot>
  <tr style="color:#3E1176; font-size:22px;font-weight:bold;">
    <td colspan="3" style="text-align:right;">Total</td>
    <td style="padding:4px;text-align:right;">sample</td>
  </tr>
</tfoot>
  </table>

  <br>
  <br>Thank you.
  <br>
  <br>Yours Sincerely,
  <br>Somebody@Work
</body>

</html>

Unable to apply border-top and border-bottom to the tr tag

This looks like a perfect use case for CSS Tables, using:

display: table
display: table-row
display: table-cell

Working Example:

.table { display: table;}
.row { display: table-row;}
.cell { display: table-cell; width: 60px; height: 60px;}
.row.middle .cell {  border-top: 2px solid rgb(0, 0, 0);  border-bottom: 2px solid rgb(0, 0, 0);}
.cell.center {  border-left: 2px solid rgb(0, 0, 0);  border-right: 2px solid rgb(0, 0, 0);}

<div class="table">
  <div class="row top">   <div class="cell left"></div>   <div class="cell center"></div>   <div class="cell right"></div>  </div>
  <div class="row middle">   <div class="cell left"></div>   <div class="cell center"></div>   <div class="cell right"></div>  </div>
  <div class="row bottom">   <div class="cell left"></div>   <div class="cell center"></div>   <div class="cell right"></div>  </div>
</div>

Add border at the end of bootstrap table

Add the border-bottom class to your table: <table class="table border-bottom">

jsFiddle Example

Display Property - Table, Row, Cell - How to Add Border to Bottom of Each LI now Being Displayed as a Row?

I finally found a solution:

It uses uses boxshadow to emulate a border and ignores the first li.

The top two styles are for browsers which may not supprt CSS3 and may not be necessary for modern browsers.

.post-body ul li + li{
-moz-box-shadow: 0 -1px 0 #8d8d8d;
-webkit-box-shadow: 0 -1px 0 #8d8d8d;
box-shadow: 0 -1px 0 #8d8d8d;
}

nested table border-bottom not displaying

tr borders are only obeyed in collapsed border mode. See inline style attribute on the inner table below.

.inner-table tr{
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    line-height: 2;
    border-bottom: 1px solid black;    
}

<table>
   <td>
       <table class="inner-table" style="border-collapse: collapse">
          <tr><td>row1</td></tr>
          <tr><td>row2</td></tr>
       </table>
   </td>
</table>

How to specify the bottom border of a tr?

Try the following instead:

<html>
 <head>
  <title>Table row styling</title>
  <style type="text/css">
    .bb td, .bb th {
     border-bottom: 1px solid black !important;
    }
  </style>
 </head>
 <body>
  <table>
    <tr class="bb">
      <td>This</td>
      <td>should</td>
      <td>work</td>
    </tr>
  </table>
 </body>
</html>