Border Collapse Differences in Ff and Webkit

border-collapse works differently in chrome and firefox

Use display: block; in .lightBgOnHover css:

like:

.lightBgOnHover {
   -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    display: block;
}

Check Fiddle here.

Different appearance between Firefox and Chrome of the Border style

This is just differing border drawing implementations. You'll notice that there's a difference in IE and Opera too:

I didn't test Safari, but I'd expect it to look the same as Chrome since they use the same rendering engine.

The only way that I can think of to get a consistent border across browsers is to set border-collapse to separate on the <table> element:

table {
    border-collapse: separate;
}

This, unfortunately, means you have a new problem to solve — there will now be 2x 10px borders between each cell. You can work around this by altering your markup or adding extra CSS rules. For instance, I changed the CSS to the following:

table {
    border-collapse: separate;
}

table td{
    padding:10px;
    background:#415DA1;
    border-top:solid 10px #F00;
    border-right:solid 5px #CCC;
    border-bottom:solid 10px #F00;
    border-left:solid 5px #CCC;
}

table td:first-child {
    border-left-width: 10px;
}
table td:last-child {
    border-right-width: 10px;
}

Demo: http://jsfiddle.net/AndyE/B2fjn/1/

This gives as good a result as you can probably expect in modern browsers, but doesn't look so great in IE 6-8. You'll need to experiment until you can get the best result possible.

Different border spacing for different rows

Depending on your compatibility requirements, you have the option of using CSS generated-content:

th {
    /* other CSS */
    position: relative;
}

thead th::before,
thead th::after {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 0.5em;
    border-bottom: 1px solid #fff;
}

thead th::before {
    left: 0;
}

thead th::after {
    right: 0;
}

JS Fiddle demo.

For the sake of simplicity I've given both th elements the same ::before and ::after, however if there's always only two th elements the selectors can be changed:

th {
    /* other CSS */
    position: relative;
}

thead th:first-child::after,
thead th:last-child::before {
    content: '';
    position: absolute;
    bottom: -1px;
    width: 0.5em;
    border-bottom: 1px solid #fff;
}

thead th:last-child::before {
    left: 0;
}

thead th:first-child::after {
    right: 0;
}

JS Fiddle demo.

When using border-collapse, how to compute border-bottom-width in JavaScript?

Interesting! Seems like it's a plain inconsistency between browsers, don't think there's a simple solution to this. Anyways, here's a hacky solution/workaround:

var th = document.getElementById('th');var table = document.getElementById('table');var style = window.getComputedStyle(th);
table.style.borderCollapse = 'separate';var borderHeight = style.getPropertyValue('border-bottom-width');table.style.borderCollapse = 'collapse';console.log(borderHeight);

table {  border-collapse: collapse;}th {  border-bottom: 11px solid red;}

<table id="table">  <tr>    <th id="th">TH</th>  </tr></table>

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>