Как убрать интервал между вложенной таблицей и строкой таблицы

Question

У меня есть следующий код jquery, который работает и создает таблицу. Я вижу свою таблицу, но результат не такой красивый.

function fillData(data) {

    $(document).ready(function($)
    {
        var random_id = function  () {
    var id_num = Math.random().toString(9).substr(2,3);
    var id_str = Math.random().toString(36).substr(2);
        return id_num + id_str;
    }

var tbl = "";
tbl += '<table id="reviewTable" class="table table-sm table-striped">';
tbl += "<thead>";
tbl += "<tr>";
tbl += "<th></th>";
tbl += "</tr>";
tbl += "</thead>";

tbl += "<tbody>";

$.each(data, function (index, item) {
  var row_id = random_id();
  //loop through ajax row data
  tbl += "<tr>";
  tbl += "<td>";
  tbl += "<table>";
  tbl += "<tbody>";
  tbl += "<tr>";
  tbl +=
    '<td><div class="underline font-weight-bold" col_name="place">' +
    item.place.place_name +
    "</div></td>";
  tbl +=
    '<td><div class="boldanditalic row_data" col_name="date">' +
    item.date +
    "</div></td>";
  tbl += "<td></td>";
  tbl += "<td></td>";
  tbl += "<td></td>";
  tbl += "<td></td>";
  tbl += "<td></td>";
  tbl += "<td></td>";
  tbl += "</tr>";
  tbl += '<tr row_id="' + row_id + '">';

  tbl +=
    '<td ><div class="row_data divScrollbar" edit_type="click" col_name="fp">' +
    item.fp +
    "</div></td>";
  tbl +=
    '<td ><div class="row_data divScrollbar" data-text="sp" edit_type="click" col_name="sp">' +
    item.sp +
    "</div></td>";
  tbl +=
    '<td ><div class="row_data divScrollbar" data-text="tp" edit_type="click" col_name="tp">' +
    item.tp +
    "</div></td>";
  tbl +=
    '<td ><div class="row_data divScrollbar" data-text="fop" edit_type="click" col_name="fop">' +
    item.fop +
    "</div></td>";
  tbl +=
    '<td ><div  class="row_data divScrollbar" data-text="fip" edit_type="click" col_name="fip">' +
    item.fip +
    "</div></td>";
  tbl +=
    '<td ><div class="row_data divScrollbar" data-text="sip" edit_type="click" col_name="sip">' +
    item.sip +
    "</div></td>";
  tbl +=
    '<td ><div class="row_data divScrollbar" data-text="sep" edit_type="click" col_name="sep">' +
    item.sep +
    "</div></td>";
  //--->edit options > start
  tbl += "<td >";
  tbl +=
    '<span class="btn_edit" > <a href="#" class="btn btn-link " row_id="' +
    row_id +
    '" > Edit</a> </span>';
  tbl +=
    '<span class="btn_delete" > <a href="#" class="btn btn-link " row_id="' +
    row_id +
    '" > Remove</a> </span>';

  //only show this button if edit button is clicked
  tbl +=
    '<span class="btn_save"> <a href="#" class="btn btn-link"  row_id="' +
    row_id +
    '"> Save</a> </span>';
  tbl +=
    '<span class="btn_cancel"> <a href="#" class="btn btn-link" row_id="' +
    row_id +
    '"> Cancel</a> </span>';
  tbl += "</td>";
  //--->edit options > end
  tbl += "</tr>";
  tbl += "</tbody>";
  tbl += "</table>";
  tbl += "</td>";
  tbl += "</tr>";
});
//--->create table body rows > end
tbl += "</tbody>";
//--->create table body > end
tbl += "</table>";
}); 
    }//end function

Соответствующая часть css выглядит следующим образом:

.boldanditalic {
  font-style: italic;
  font-weight: bold;
  font-size: 11px;
}

Я добавил solid рамку чтобы увидеть, почему вывод выглядит так. Вы можете найти пример выходных данных здесь: мой пример выходных данных .

Я бы хотел 1) удалить пространство между вложенной таблицей и внешней таблицей. 2) Pu sh последний td (который включает в себя кнопки remove и edit) к крайней стороне таблицы без определения фиксированных размеров для всех столбцов, поскольку пользователь может добавлять тексты с различными размерами в div и div должны быть гибкими с точки зрения размера. Я хотел бы нарисовать sh только кнопки до конца строки, чтобы все кнопки remove и edit были видны точно друг под другом (я имею в виду в похожих местах на странице). Для первой части я пробовал разные вещи, такие как padding:0; и margin:0;, но это не помогло.

Обновление 1 : мой пример данных сложен, но как это было упомянув в комментариях, что невозможно воспроизвести проблему, не зная данных, я публикую пример данных в две строки. Данные выглядят так: [{"id":"XYZ","fp":"one","sp":"one one","tp":"","fop":"","fip":"","sip":"","sep":"","place":{"place_name":"One World Trade Center","id":"123","longitude":-74.01,"latitude":40.71},"user":{"id":"something","email":"test@test.com","password":"sample","fullname":"Someone","enabled":true,"roles":[{"id":"someid","role":"ADMIN"}],"firstname":"first","lastname":"last"},"date":"Sun Apr 12 08:23:01 CEST 2020"},{"id":"theid","fp":"three","sp":"thre three","tp":"","fop":"","fip":"","sip":"","sep":"","place":{"place_name":"Three Sisters","id":"someid","longitude":150.31,"latitude":-33.73},"user":{"id":"theid","email":"test@test.com","password":"sample","fullname":"Someone","enabled":true,"roles":[{"id":"theid","role":"ADMIN"}],"firstname":"first","lastname":"last"},"date":"Sun Apr 12 08:23:20 CEST 2020"}]

Обновление 2 : после использования предложений в ответе результаты выглядят следующим образом: Результаты после обновления

Answer 1

В моем предыдущем ответе я опубликовал «исправление», которое было не очень хорошим ... И закончил, предложив вам взглянуть на CSS Сетки вместо использования вложенных таблиц , чтобы достичь этого.

Теперь я хочу показать вам, как ваш проект будет выглядеть с сетками. Это все еще начало, над которым вы должны работать;) Я надеюсь, что это будет поучительно.

По моему мнению, вложенные таблицы, используемые для выравнивания контента на веб-странице, написаны в конце 1990-х годов.

CSS Grid Layout - самая мощная система разметки, доступная в CSS.

Вы не заметите смещения больше и что теперь он отзывчивый. Я настоятельно рекомендую вам go, хотя упомянутая выше документация.

Также ... Я изменил ваш JS о том, как создавать элементы этой сетки. Ваш код добавляет HTML из нескольких строк и не поддерживается. И что вы хотите сделать, это довольно простое отображение данных. Легко представить что-то более сложное.

Я использовал jQuery .clone () , чтобы дублировать контейнеры сетки из «шаблона». Так что этот шаблон очень прост в обслуживании / изменении. Затем я использовал метод jQuery мощный .find () , чтобы заполнить сетку данными. Опять же, это делает визуально понятным и простым для чтения / поддержки кода.

let data = [{
    id: "XYZ",
    fp: "one",
    sp: "one one",
    tp: "",
    fop: "",
    fip: "",
    sip: "",
    sep: "",
    place: {
      place_name: "One World Trade Center",
      id: "123",
      longitude: -74.01,
      latitude: 40.71
    },
    user: {
      id: "something",
      email: "test@test.com",
      password: "sample",
      fullname: "Someone",
      enabled: true,
      roles: [{
        id: "someid",
        role: "ADMIN"
      }],
      firstname: "first",
      lastname: "last"
    },
    date: "Sun Apr 12 08:23:01 CEST 2020"
  },
  {
    id: "theid",
    fp: "three",
    sp: "thre three",
    tp: "",
    fop: "",
    fip: "",
    sip: "",
    sep: "",
    place: {
      place_name: "Three Sisters",
      id: "someid",
      longitude: 150.31,
      latitude: -33.73
    },
    user: {
      id: "theid",
      email: "test@test.com",
      password: "sample",
      fullname: "Someone",
      enabled: true,
      roles: [{
        id: "theid",
        role: "ADMIN"
      }],
      firstname: "first",
      lastname: "last"
    },
    date: "Sun Apr 12 08:23:20 CEST 2020"
  }
];

// Random id function
var random_id = function() {
  var id_num = Math.random().toString(9).substr(2, 3);
  var id_str = Math.random().toString(36).substr(2);
  return id_num + id_str;
};

function fillData(data) {

  // Loop through data
  $.each(data, function(index, item) {

    // Clone the template
    let tbl = $(".template").clone();
    // Remove the template class from the cloned element
    tbl.removeClass("template");

    // Get a random id
    let row_id = random_id();
    tbl.attr("id", row_id);

    // Fill with data...
    // First row
    tbl.find(".item-places").html(item.place.place_name);
    tbl.find(".item-date").html(item.date);

    // Second row
    tbl.find(".item-a").html(item.fp);
    tbl.find(".item-b").html(item.sp);
    tbl.find(".item-c").html(item.tp);
    tbl.find(".item-d").html(item.fop);
    tbl.find(".item-e").html(item.fip);
    tbl.find(".item-f").html(item.sip);
    tbl.find(".item-g").html(item.sep);
    tbl.find(".btn_edit").attr("data-row_id", row_id);
    tbl.find(".btn_delete").attr("data-row_id", row_id);
    tbl.find(".btn_save").attr("data-row_id", row_id);
    tbl.find(".btn_cancel").attr("data-row_id", row_id);

    // Append to body
    $("body").append(tbl)
  });
} //end fillData

// Function call
fillData(data);

.boldanditalic {
  font-style: italic;
  font-weight: bold;
  font-size: 11px;
}

.template {
  display: none !important;
}

.rowContainer {
  display: grid;
  grid-template-columns: repeat(7, 11%) 23%;
  grid-template-rows: auto;
  grid-template-areas: "places places date date . . . ." "a b c d e f g btns";
}

.rowContainer div {
  padding: 0.4em 0.2em;
}

.item-places {
  grid-area: places;
}

.item-date {
  grid-area: date;
}

.item-a {
  grid-area: a;
}

.item-b {
  grid-area: b;
}

.item-c {
  grid-area: c;
}

.item-d {
  grid-area: d;
}

.item-e {
  grid-area: e;
}

.item-f {
  grid-area: f;
}

.item-g {
  grid-area: g;
}

.item-rowBtns {
  grid-area: btns;
  text-align: center;
}

.grey {
  background-color: #E6E6E6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="template rowContainer">
  <div class="item-places underline font-weight-bold grey" col_name="place"></div>
  <div class="item-date boldanditalic row_data grey" col_name="date"></div>
  <div class="grey"></div>
  <div class="grey"></div>
  <div class="grey"></div>
  <div class="grey"></div>
  <div class="item-a row_data divScrollbar" edit_type="click" col_name="fp"></div>
  <div class="item-b row_data divScrollbar" data-text="sp" edit_type="click" col_name="sp"></div>
  <div class="item-c row_data divScrollbar" data-text="tp" edit_type="click" col_name="tp"></div>
  <div class="item-d row_data divScrollbar" data-text="fop" edit_type="click" col_name="fop"></div>
  <div class="item-e row_data divScrollbar" data-text="fip" edit_type="click" col_name="fip"></div>
  <div class="item-f row_data divScrollbar" data-text="sip" edit_type="click" col_name="sip"></div>
  <div class="item-g row_data divScrollbar" data-text="sep" edit_type="click" col_name="sep"></div>
  <div class="item-rowBtns">
    <span class="btn_edit"><a href="#" class="btn btn-link">Edit</a></span>
    <span class="btn_delete"> <a href="#" class="btn btn-link">Remove</a></span>
    <span class="btn_save"> <a href="#" class="btn btn-link">Save</a></span>
    <span class="btn_cancel"> <a href="#" class="btn btn-link">Cancel</a></span>
  </div>
</div>

CodePen