Search code examples
jqueryhtmlcsstablesorter

Position relative issue at specific browser

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?

Solution

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