樣式嵌套表位置

Question

我需要一張卡片，如下所示：

所以我寫了下面的代碼

 .box { border: 1px solid #CCC; padding: 40px 25px; background: #FFF; max-width: 90%; position: relative; border-radius: 3px; margin: 0 auto; } .box.ofh { overflow: hidden; } /*Ribbon */ .half-circle-ribbon { background: #EA4335; color: #FFF; height: 60px; width: 100px; text-align: right; padding-top: 10px; padding-right: 10px; position: absolute; top: -1px; right: -1px; flex-direction: row; border-radius: 0 0 0 100%; border: 1px dashed #FFF; box-shadow: 0 0 0 3px #EA4335; } .price { width: 58%; height: 100%; color: #eef122; font-size: 2em; font-weight: 900; text-align: right; } .price .cents { margin-left: -.5em; position: relative; top: -.625em; font-size: .5em; } .fit-picture { width: 250px; } thead, tfoot { background-color: #333; color: #fff; }

 <!-- Ribbon --> <div class="box ofh"> <div class="half-circle-ribbon"><span class="price">350.<span class="cents">99</span></span></div> <table style="width: 100%; height: 100%;"> <thead> <tr> <th colspan="2">كرت صنف</th> </tr> </thead> <tr> <td style="width: 250px;"> <img class="fit-picture" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices"> </td> <td style="width: 750px; text-align: right;"> <table dir="rtl" style="width: 100%; border: 1px 1px 1px 1px solid #333; position: relative; top:5%; right: 5%;"></table> <tr> <td>الصنف:</td> <td>nested table C2</td> </tr> <tr> <td>المورد:</td> <td>nested table</td> </tr> </table> </td> </tr> </table> </div>

但我得到了以下內容：

我認為問題出在這一行：

<table dir="rtl" style="width: 100%; border: 1px 1px 1px 1px solid #333; position: relative; top:5%; right: 5%;"></table>

為什么，嵌套表的位置不應該被引用到父元素，在這種情況下是第一個表的td ？！

如何解決這個問題？

Answer 1

您在兩者之間缺少一個<table>標記。

 .box { border: 1px solid #ccc; padding: 40px 25px; background: #fff; max-width: 90%; position: relative; border-radius: 3px; margin: 0 auto; } .box.ofh { overflow: hidden; } /*Ribbon */ .half-circle-ribbon { background: #ea4335; color: #fff; height: 60px; width: 100px; text-align: right; padding-top: 10px; padding-right: 10px; position: absolute; top: -1px; right: -1px; flex-direction: row; border-radius: 0 0 0 100%; border: 1px dashed #fff; box-shadow: 0 0 0 3px #ea4335; } .price { width: 58%; height: 100%; color: #eef122; font-size: 2em; font-weight: 900; text-align: right; } .price .cents { margin-left: -0.5em; position: relative; top: -0.625em; font-size: 0.5em; } .fit-picture { width: 250px; } .table-2 { display: flex; justify-content: center; border: 1px solid black; margin-top:-6.5rem; } .nest-table { display: flex; flex-direction: row; justify-content: space-between; } thead, tfoot { background-color: #333; color: #fff; }

 <!-- Ribbon --> <div class="box ofh"> <div class="half-circle-ribbon"> <span class="price">350.<span class="cents">99</span></span> </div> <table style="width: 100%; height: 100%"> <thead> <tr> <th colspan="2">كرت صنف</th> </tr> </thead> <tr> <td style="width: 250px"> <img class="fit-picture" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices" /> </td> <td style="width: 750px; text-align: right"> <table dir="rtl" style=" width: 100%; border: 1px 1px 1px 1px solid #333; position: relative; top: 5%; right: 5%; " ></table> <table class="table-2"> <tbody style="width: 100%"> <tr class="nest-table"> <td style="margin-left: 30%">nested table C2</td> <td>الصنف:</td> </tr> <tr class="nest-table"> <td style="margin-left: 30%">nested table</td> <td>المورد:</td> </tr> </tbody> </table> </td> </tr> </table> </div>