Styling nested table position

Question

I need to have a card as below:

So I wrote the below code

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

But I got the below:

I think the problem is in this line:

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

Why, should not be the position of the nested table be referenced to the parent element, which is in this case the td of the first table?!

How to fix this?

Answer 1

You were missing one <table> tag in between.

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