CSS表格边框 - 只有独特的桌子和水平的水平标题边界

Question

我正在尝试设计一个简单的表：

<table>
  <tr>
    <th>Title1</th>
    <th>Title2</th>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

我希望桌子的顶部和底部有水平边框，标题底部有水平边框：

当我没有ID标识的包含div时，这似乎工作正常：

JS Fiddle 1 (working)

一旦我把它放在一个包含的div中它就失败了：

JS Fiddle 2 (not working)

使用CSS我可以使用firebug实现这一点。不知何故试图把它放在样式表中导致它失败（没有出现边框）。有什么想法吗？

修改 我找到了一个拼写错误，但由于我原来的工作没有用，我已经更新了上面的内容，以显示我遇到的错误。问题是以某种方式添加一个包含div并通过其ID识别表。

Answer 1

更新小提琴： http://jsfiddle.net/XPyzM/243/

table {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

包含一个额外的括号

为新问题更新： http://jsfiddle.net/XPyzM/247/

如果您有任何问题，请查看它。