Вставка таблицы, которая состоит из 2 строк и 4 столбцов справа рядом с изображением в HTML

Question

Я пытаюсь вставить в таблицу таблицу, состоящую из 2 строк и 4 столбцов, в то время как я сохраняю 2 строки и 4 столбца нижней таблицы изображения. прямо рядом с изображением в таблице Есть ли в любом случае, чтобы положить его в? Я новичок в html, поэтому структура таблицы может выглядеть не организованной, потому что она включает множество классов и идентификаторов для jquery.

спасибо,

(пс: Мне жаль, что язык состоит из корейского, потому что я делаю это для школьного проекта)

Answer 1

Я не уверен на 100%, что понял, как вы хотели, чтобы это выглядело, но как насчет этого?

Я просто разделил изображение на таблицу с текстом и переместил его в другой <td> внутри <tr> с изображением ...

эта часть прямо здесь:

<tr id="pop">
  <!---- ↓ td of image ↓ ---->
  <td id="bor" rowspan="1" colspan="2">
      <img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"> 
  </td>
  <!---- ↑ td of image ↑ ---->
  <!---- ↓ td of table with text ↓ ---->
  <td>
      <table>
        <tbody>
           <tr id="pop">
             <td id="bor">차량 대여요금</td>
             <td style="border:1px solid gray">52,520원</td>
           </tr>
           <tr id="pop">
             <td id="bor">보험료</td>
             <td style="border:1px solid gray">52,520원</td>
           </tr>
           <tr id="pop">
             <td id="bor">쿠폰/이벤트</td>
             <td style="border:1px solid gray">52,520원</td>
           </tr>
           <tr id="pop">
              <td style="background-color:lightgray; border:1px solid gray;" id="bor"> 
              총 결제 금액</td>
              <td style="background-color:lightgray; border:1px solid gray;">52,520원 
              </td>
           </tr>
        </tbody>
       </table>
     </td>
     <!---- ↑ td of table with text ↑ ---->
  </tr>

Рабочий образец:

$(document).on('click', '.accordion-head', function() {


      $('.accordion-head').removeClass('open');
      if (!$(this).hasClass('open')) {
        $(this).addClass('open1');
      } else {
        $('.accordion-head').removeClass('open');
        $(this).addClass('close');
      }
      $('.accordion-body').slideUp("fast");
      $(this).next().slideDown("fast");

      $(document).on('dblclick', '.accordion-head', function() {

        if (!$(this).hasClass('open')) {
          $('.accordion-head').removeClass('open1');
        } else {
          $('.accordion-head').removeClass('open');
          $(this).addClass('close');
        }
        $('.accordion-body').slideUp("fast");
      });
    });

.outer {
  width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.main-title {
  margin-top: 35px;
  font-size: 20px;
  font-weight: 900;
}

hr.garo {
  border: 1px solid #757272;
  margin: 17px 0px 0px 0px;
}

#tableMain {
  width: 800px;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
  border-collapse: separate;
  border-spacing: 0px;
  margin-top: 40px;
  text-align: center;
}

table {
  width: 100%;
}

th {
  margin-top: 10px;
  background: lightgray;
  box-sizing: border-box;
}

th,
td {

  text-align: center;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
}

#pop {
  border: 1px solid lightgray;
  font-size: 10px;
  text-align: left
}

/***** ↓↓ EDIT: added this css ↓↓ *****/
#pop > td {
  vertical-align: bottom;
}
/***** ↑↑ EDIT: added this css ↑↑ *****/

#tableMain>img {
  display: block;
  width: 200px;
  height: 100px;
  justify-content: center;
}



#bor {
  border: 1px solid gray;
  text-align: left;
  font-weight: bold;
}

.pay {
  text-align: left;
  font-weight: bold;
  background-color: rgba(211, 211, 211, 0.418);
}

.breakrow {
  border: 1px solid lightgray;
  margin-top: 10px;
  margin-bottom: 10px;

}

input {
  background-color: #ffc107;
  color: white;
  border-radius: 2px;

}

#sep {
  border: 1px solid gray;
  border-collapse: collapse;

}

#space {
  margin-left: 20px;
  width: 60;
  height: 25px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  color: white;
}

.arrow {
  float: left;
  border: 10px solid transparent;
  margin-top: 10px;
  margin-left: 20px;
  border-top-color: lightgray;
  transition: 350ms;
  position: absolute;
}

.accordion-head.open {
  background: white;
}

.accordion-head.open1 {
  background: #eee;
}

.accordion-head.open .arrow {
  margin-top: -10px;
  transform: rotate(180deg);

}

Надеюсь, это поможет!