jquery - 边框不显示在卡片式 div 结构中

Question

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

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>

JS fiddle : 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/

您所需要做的就是添加:边框折叠:折叠；到你的父分区。当您使用 display: table; 时，就会发生这种情况，您必须特别注意表格的边框。

希望这有帮助!