边框未显示在卡片中，如 div 结构

Question

出于某种原因，即使我对外部和内部的 boder 使用相同的颜色，内部边框也不会显示。谁能帮我显示内部和外部的边界？

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： https://jsfiddle.net/24qLhtto/1/

Answer 1

<div id="card">
<div style="display: table; border-collapse: collapse;  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;z-index:10; height: 24px; padding: 12px 20px; border: 1px solid red; background-color: rgb(247, 247, 249);">Footer</div>
</div>
</div>

给你：

https://jsfiddle.net/24qLhtto/2/

您需要做的就是添加：border-collapse: collapse;到你的父部。当您有display: table;时，就会发生这种情况，您必须特别注意表格上的边框。

希望这有帮助！

Answer 2

试试这个

<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>

将border-collapse: collapse添加到display: table

演示

Answer 3

我改变了看待这个问题的方式，因为我遇到了以下问题： -不要使用display:table，带有display: row。如果这样做，边框将无法正确显示，除非您也使用border-collapse: collapse，在这种情况下，边框半径将不起作用。我改用了display:flex。

https://codepen.io/dumitrudan608/pen/eEdPVG