Giving a Border to an HTML 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;
}

Is there any reason you can't put a border around a tr in an html table using CSS

No it should work.

See this: http://jsfiddle.net/jasongennaro/qCzrg/

Perhaps you need to collapse your borders with

border-collapse:collapse

Or maybe other styles for the TD is overriding

Can you show some more code.

As per your edit:

(but the issue is that i get a space in the middle where the padding
is between the cells. I want to avoid this space and have one straight
line below the row.

Sounds like you definitely need border-collapse

You should add it to the style of the table.

Here's a bit more about it: http://www.the-art-of-web.com/css/bordercollapse/

EDIT 2

Based on the new code and the following comment:

the issue is that if i use: border-collapse:collapse then the
border-radius styling doesn't work anymore

I am guessing you want something like this

.quantityTable{
    border-radius: 15px 15px 15px 15px;
    background-color: #d6b4E1;
    margin-bottom: 5px;
    width: 100%;    
}

.underRow{
    border-bottom-color: #7a26b9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.underRow:last-child{
    border-bottom:none;
}

.underRow td{
    padding: 15px;  
}

Example: http://jsfiddle.net/jasongennaro/qCzrg/1/

NOTE

I made the radius bigger so you could see it easier.
I also removed the border from the table itself

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>

How to add border radius on table row

You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Border around specific rows in a table?

How about tr {outline: thin solid black;}? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.

Table Border is Not working : Table Row (tr) Border is not appear using css

You need to add border to td for example:

<style>
table td{ padding:20px; border:1px solid #F00 ; }
</style>

DEMO

Or you can add border to the table:
like this:

table{ border:1px solid #F00 ;  }
table td{ padding:20px; }

DEMO2

If you want only row border effect you can try this:

table td{
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    padding:20px; 
 }

 table{ border:1px solid #F00 ;  }

DEMO3

How do I put a border around a tr tag?

Add table { border-collapse: collapse; }.

From the CSS2 specification:

In [the border-collapse: separate model], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

Adding a border around the first row in a table (and other styling)?

Add border-collapse to your table rule. See the code below;

table {     border-collapse: collapse; }tr:first-child {    background-color: rgb(116, 195, 80);    -webkit-background:linear-gradient(rgb(116, 195, 80), rgb(160, 219, 132));   border : 1px solid #000;  }

<table>
   <tr><td>Heading1</td><td>Heading2</td></tr>   <tr><td>content</td><td>content</td></tr>
 </table>

Giving a Border to an HTML Table Row, <Tr>