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.