Jquery 卡片状div结构中未显示边框

出于某种原因，即使我对外部边界和内部边界使用相同的颜色，内部边界也不会显示。有人能帮我指出里面和外面的边界吗

PS：我试过换颜色，但没用

<div id="card">

  <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

标题
身体
页脚

JSfiddle：

标题
身体
页脚

试试这个

<div id="card">

  <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);border-collapse: collapse">
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div>
    <div style="display: table-row; padding: 20px;">Body</div>
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div>
  </div>
</div>

标题
身体
页脚

添加

边框折叠：折叠

到

显示：表格

---

我改变了看待这个问题的方式，因为我遇到了以下问题： -不要将

display:table

与

display:row

一起使用。如果这样做，边框将无法正确显示，除非同时使用

边框折叠：折叠

，在这种情况下，边框半径将不起作用。我改用了

display:flex

---

谢谢您的回答！你能帮我确定边界半径吗？“它没有显示出来。”杜米特鲁达尼尔看一下答案。希望这有帮助，我也可以请你投票并将这个答案标记为已接受，这样未来的访问者可以轻松快速地解决他们的问题？谢谢在我的例子中，我没有display:table row div的子div：（这是否意味着我需要在具有display:table row的三个div周围添加另一个container div？@DumitruDaniel我相信这是唯一可以在其周围创建“边界半径”的方法。希望这能有所帮助！