Why Border of <Tr> Not Showing in Ie

Why border of tr not showing in IE?

I would avoid styling tr elements because they don't really "exist" as such, apart from for semantic reasons. You're better off targeting the table cells themselves, with something like this:

table tfoot tr:first-child th,
table tfoot tr:first-child td {
    font-weight:bold;
    background:yellow;
    border-top:2px solid red; 
    border-bottom:2px solid red;
}

Also, since you are targeting directly nested elements, you can use the child selector, which is faster for browsers to parse (they only have to search one level up/down).

table > tfoot > tr:first-child > th,
table > tfoot > tr:first-child > td {
    ...
}

Border not appearing in IE9 & IE10

Best solution that I could find:

table{border-top:1px solid #000;}
tr{border-left:1px solid #000;border-bottom:1px solid #000;}
td{border-right:1px solid #000;}

Example here

Checked in both IE9 and IE10

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;

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

Set border to table tr, works in everything except IE 6 & 7

IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)

table#event_calendar {
    border-collapse: collapse;
    border-right: 1px solid red;
    border-left: 1px solid red;
}

table#event_calendar td, table#event_calendar th {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

borders in table not showing up in IE11 for tds with triangle at corner

The code you've given works just fine in IE11, but does not work in IE7.

The problem is that IE is falling into IE7 compatibility mode.

This generally happens when you run code locally while testing. There is an IE setting that tells IE to use compatibility mode for local intranet sites. This setting is designed for businesses who need to upgrade IE but don't want to update their systems that rely on older versions.

You can fix it by adding the x-ua-compatible meta tag to your HTML code, or by simply changing the relevant config setting in your browser.

Border-color not working in IE

Define border first, then add border color.

td {
   border-bottom:1px solid transparent;
}

OR
Add in Jquery 'border-bottom', '1px solid red'

$('.button').on('click', function(){
    $('.tr').css('border-top-color', 'red');
    $('.tr').find('td').css('border-bottom', '1px solid red');
});

why don't you just change the border color of tr for exampe

$('.button').on('click', function(){
    $('.tr').css('border-color', 'red');
});

Fiddle

---

Related Topics