Как я могу добавить таблицу в HTML я сделал?

Question

Я пытаюсь добавить новую таблицу, которая состоит из 2 строк и 4 столбцов рядом с изображением, в то время как я сохраняю 2 строки и 4 столбца снизу таблица изображения. (Просто добавив новую таблицу справа от изображения, сохранив нижнюю таблицу, как вы видите изображение.) Я не организовал все элементы таблицы, поэтому она не работает так, как я хочу, я знаю, что должен исправить, и я пробовал по-разному, но это не сработало.

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

$(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
}

#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);
}

Answer 1

Используя colspan и затем внутри этого td я использую другую таблицу с 2 rows и 4 col В первой записи вы можете проверить это.

$(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
}

#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);
}
.sub-tbl {
    border-collapse: collapse;
}