Как управлять межстрочным интервалом в таблицах?

Question

У меня есть следующая ajax функция, которая создает таблицу:

$(function() {
    var table = $('<table id="table2">');
    $.each(data, function(i, item) {
    var $tr = $('<tr>').append(
    $('<td>').text(item.place.id),
    $('<td>').text(item.date), 
    );

     var $tr2 = $('<tr>').append(
     $('<td>').text(item.first),
      $('<td>').text(item.second));
      table.append($tr);
      table.append($tr2);

      $('#review').append(table);
 });

И мой CSS выглядит следующим образом:

#table2 {
   border-collapse: separate;
   border-spacing:1px 5px;
}

Вот что я получаю как результат:

Я не понимаю, почему расстояние между строками различается. «First direct ..», «First Canadian», «Secondig ..», «Third ...» и «Fourth ...» на самом деле являются названиями, и то, что упоминается под этими названиями, принадлежит им. Поэтому я даже предпочитаю, чтобы «Дети дружелюбные, зеленые» были ближе к «Первому прямому ...», чем к «Первому канадцу».

Я пробовал с другими числами для border-spacing, но это не так помощь.

Answer 1

Я бы предложил использовать «сброс» CSS каждый раз, когда вы что-то пишете. Скажите, помогло ли это, я постараюсь воссоздать его, если это не поможет.