Border Around Tr Element Doesn't Show

Border around tr element doesn't show?

Add this to the stylesheet:

table {
  border-collapse: collapse;
}

JSFiddle.

The reason why it behaves this way is actually described pretty well in the specification:

There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called separated borders around
individual cells, the other is suitable for borders that are
continuous from one end of the table to the other.

... and later, for collapse setting:

In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group.

Border not showing under <tr> element in a HTML table

Try adding border-collapse:collapse; to your table rules:

.cart_table {
    width:100%;
    border-collapse:collapse;
}

jsFiddle example

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

Why does the border of tr not show unless the parent table tag has the border-collapse property set to collapse?

i think you need to add border to "td".
like :

 tr,td {
            border: 1px solid black;
        }

CSS table border-bottom not showing

Try to run your code through those validators, specifically:

border-bottom: 1xp solid #F6F6F6; /* shows xp instead of px (pixels) */

https://validator.w3.org/ -- for HTML

https://jigsaw.w3.org/css-validator/ -- for CSS

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

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

1. I made the radius bigger so you could see it easier.

2. I also removed the border from the table itself

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 with id don't show borders around td and tr on css

The following code places a border only on tables with an id of search_form and also a border around th and td children:

#search_form {
   height: 2em;
   word-wrap: break-word;
   border: 10px solid black;
}

#search_form th {
  border: solid 5px black
}

#search_form td {
  border: solid 5px black
}

Small suggestion I would kebab-case the id name because that is the convention for HTML.

Then your HTML could be:

<table id="search-form">
   ...
</table>

---

Related Topics