向具有行跨度的表单元格添加引导折叠

Question

我正在使用html，bootstrap和js创建一个表。 我已经使用rowspan来获得不同高度的单元格。

每行的第三个单元格比其余单元格多（因此行跨度）（如果此行不清楚，请查看jsfiddle）

现在，第三个单元格中的每一行都是可折叠的。因此，当我单击行时，它应该打开另一个表。 （为简单起见，我只是使第一行可折叠）

我有2个问题：

1）单击我的可折叠元素时，单元格的宽度增加；当我隐藏可折叠元素时，单元格的宽度减小。我希望宽度保持不变。

2）我想使隐藏表与外部表从同一位置开始。目前，它是随机在页面上某个地方开始的

$(document).ready(function() {
  var list1 = {
    "Feature": "TestSuite",
    "Scenario": "TestName",
    "Step": "line1<br>line2<br>line3<br>line4<br>",
    "Result": "PASS"
  }

  var list2 = {
    "Feature": "TestSuite1",
    "Scenario": "TestName1",
    "Step": "line1.1<br>line2.1<br>line3.1<br>line4.1<br>",
    "Result": "PASS"
  }

  var dashboardMap = {
    "TestSuite1": [list1, list2],
  }
  for (var key in dashboardMap) {
    var resultsTable = dashboardMap[key];
    for (var i in resultsTable) {
      table = document.getElementById("resultsTable");
      row = table.insertRow(-1);
      cell1 = row.insertCell(0);
      cell2 = row.insertCell(1);
      cell3 = row.insertCell(2);
      cell4 = row.insertCell(3);
      cell1.innerHTML = "N/A";
      cell2.innerHTML = resultsTable[i].Scenario;
      var list = resultsTable[i].Step.split("<br>");
      var rowspan = 0;
      list.splice(-1, 1);
      for (var step in list) {
        rowspan++;
      }

      cell1.rowSpan = rowspan;
      cell2.rowSpan = rowspan;
      cell4.rowSpan = rowspan;

      var hiddenTable = '<table>      <tr>        <th>Company</th>        <th>Contact</th>        <th>Country</th>      </tr>      <tr>        <td>Alfreds</td>        <td>Maria</td>        <td>Germany</td>      </tr>      <tr>'

      cell3.innerHTML = '<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button><i id="demo" class="collapse"> ' + hiddenTable + ' </i>'
      cell4.innerHTML = resultsTable[i].Result;
      var k;
      for (k = 1; k < list.length; k++) {
        row = table.insertRow(-1);
        cell1 = row.insertCell(0);
        cell1.innerHTML = list[k];
      }
    }
  }
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div id="temp" class="container">  
  <div class="table-responsive">
    <table class="table table-striped" id="resultsTable">
      <thead>
        <tr class="highlight-header" rowspan="3">
          <th>header 1</th>
          <th>header 2</th>
          <th>header 3</th>
          <th>header 4</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>