0

I'm facing a strange problem. I've put this sortable table at my webpage. I've modified css and put position: relative; at the cell of table header. Here is my fiddle. You'll look there is a border at each header cell(if you open the page by chrome browser). But, that border can't be seen at firefox and internet explorer. Only from chrome, that border can be shown!

By chrome browser:

By firefox and internet explorer:

I've noticed that if I remove the position: relative; from css:

table.tablesorter thead tr .header {
    border-right: 1px solid #333;
    position: relative;
}

that border can be shown from every browser!! But, I need that position: relative for some reasons. So, what's the reason for disappearing that border from firefox and ie? How can I fix this?

Huangism
  • 16,278
  • 7
  • 48
  • 74
user1896653
  • 3,247
  • 14
  • 49
  • 93
  • Please note that Firefox doesn't support positioning of table elements (see http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements) – Mottie Jul 24 '14 at 19:51

2 Answers2

0

Try removing border-collapse on the tr and add border-spacing:0 instead.

Web Owl
  • 567
  • 2
  • 15
  • 29
0

By default border-collapse: separate; is applied for table tag, but in your case border-collapse: collapse; is creating problems. Try removing it from table.tablesorter css class. here is updated fiddle

Ashish Balchandani
  • 1,228
  • 1
  • 8
  • 13