邊界道具爲什麼不起作用？

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>■不要在<span>小號屬於，因爲<table> s爲塊級元素和<span> s爲內聯元素，所以沒有點測試該代碼的結果將是不可預知的。使用<div>而不是<span>。

Answer 2

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

Answer 3

<span>標記用於對文檔中的內聯元素進行分組。最好的解決方案是修改<span>並改用<div>。一個簡單的修改來達到你想要的結果。