Свернуть список таблиц

Question

У меня есть список процесса, в котором в каждой строке есть ссылка «Свернуть», которая, если щелкнуть по ней, должна открыть «область контейнера», где я могу поместить некоторые другие вещи внутрь.

То, что я до сих пор делал, это:

Но, как вы можете видеть, контейнер будет иметь тот же размер, что и первый столбец "#".

Как я мог избежать этого? Или есть лучший способ сделать это, используя div или что-то еще?

Вот код:

<div class="container">
<table class="table table-striped">
    <tr>
        <th class="th-lg"><a>#</a></th>
        <th class="th-lg"><a>Status</a></th>
        <th class="th-lg"><a>ID</a></th>
        <th class="th-lg"><a>Process Name</a></th>
        <th class="th-lg"><a>Actions</a></th>
        <th></th>
    </tr>
    <tr>
        <td>1</td>
        <td><button type="button" class="btn btn-success">Active</button></td>
        <td>14</td>
        <td>foobarbaz</td>
        <td>
            <button type="button" class="btn btn-primary">Success</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Success</button>
        </td>
        <td>
            <a data-toggle="collapse" href="#tr_a" role="button" aria-expanded="false" aria-controls="tr_a">
                <span>Collapse</span>
            </a>
        </td>
    </tr>
    <tr id="tr_a" class="collapse">
        <td>container</td>
    </tr>
    <tr>
        <td>2</td>
        <td><button type="button" class="btn btn-danger">Down</button></td>
        <td>15</td>
        <td>foobarbaz</td>
        <td>
            <button type="button" class="btn btn-primary">Success</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Success</button>
        </td>
        <td>
            <a data-toggle="collapse" href="#tr_b" role="button" aria-expanded="false" aria-controls="tr_b">
                <span>Collapse</span>
            </a>
        </td>
    </tr>
    <tr id="tr_b" class="collapse">
        <td>container</td>
    </tr>
</table>

Answer 1

Вы можете попробовать добавить атрибут colspan со значением 6, который означает, что вы хотите объединить 6 столбцов в 1

<td colspan="6">container</td>

Спасибо ..

Answer 2

Вы можете использовать атрибут rowspan, чтобы ваш контейнер занимал несколько столбцов:

<tr id="tr_b" class="collapse">
    <td colspan="6">container</td>
</tr>

td {
  border: 1px solid red;
}

<div class="container">
  <table class="table table-striped">
    <tbody>
      <tr>
        <th class="th-lg"><a>#</a></th>
        <th class="th-lg"><a>Status</a></th>
        <th class="th-lg"><a>ID</a></th>
        <th class="th-lg"><a>Process Name</a></th>
        <th class="th-lg"><a>Actions</a></th>
        <th></th>
      </tr>
      <tr>
        <td>1</td>
        <td><button type="button" class="btn btn-success">Active</button></td>
        <td>14</td>
        <td>foobarbaz</td>
        <td><button type="button" class="btn btn-primary">Success</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Success</button></td>
        <td>
          <a data-toggle="collapse" href="#tr_a" role="button" aria-expanded="false" aria-controls="tr_a"> <span>Collapse</span> </a>
        </td>
      </tr>
      <tr id="tr_a" class="collapse">
        <td colspan="6">container</td>
      </tr>
    </tbody>
  </table>
</div>

(красные рамки только для визуализации)