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>

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; 给你的 parent div。当您有 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

DEMO

Answer 3

我改变了对这个问题的看法，因为我运行陷入了以下问题： - 不要将 display:table 与 display: row 一起使用。如果这样做，边框将无法正确显示，除非您还使用 border-collapse: collapse，在这种情况下 border-radius 将不起作用。我改用 display:flex。

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

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

Borders not showing in card like div structure

html

css

jquery

border

bootstrap-4