Почему не работает пограничная опора?

Question

JsFiddle DEMO

Вот мой HTML:

<span> Testing
    <table>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
            </tr>
        </tbody>
    </table>
</span>

И мой css:

span {
    border: 1px solid black;
}

Разве весь промежуток не должен получить нормальную границу? Я получаю испорченный результат в Firefox и Chrome (еще не тестировал в других)

Я что-то упускаю или делаю что-то не так?

Answer 1

<table> s не принадлежат <span> s, так как <table> s являются элементами уровня блока, а <span> s являются встроенными элементами, поэтому нет смысла проверять, что код как результат будет непредсказуемым.

Используйте <div> вместо <span>.

Answer 2

span {
    border: 1px solid black;
    display: block;
}

Answer 3

Тег <span> используется для группировки встроенных элементов в документе. Лучшим решением было бы изменить <span> и использовать вместо него <div>. Простая модификация для достижения желаемого результата.