html - 表のセル要素の境界線がセルのパディング領域に重なるのをどのように止めることができますか?

Question

境界線を持つテーブル セル要素は、それらを含むセルの垂直方向の高さを尊重しません。子の境界線は、それを含むセルのパディング (さらには境界線) と重なります。セルに境界線を含む子要素が完全に含まれるようにするには、どうすればこれを防ぐことができますか?

JSFiddle の例

<table>
    <tr>
        <td>
            <span>foo bar</span>
        </td>
    </tr>
</table>

tr {
    background: red;
}
td {
    padding: 5px;
    background: white content-box;
}
span {
    border: 10px solid blue;
}