表格行中单元格的变量/动态数量

如何创建一个具有不同列数的行的表（但并不总是相同的数字....可以动态地添加和删除列），但仍然让每行中的单元格占用整行的宽度？

当然，我只想使用CSS并避免使用Javascript解决方案。

这是我的问题的一个例子：

table{
border: solid;
}

td{
background-color: black;
color: white;
}

.fullWidth{
/* width: 100%; doesn't work */
} 
  
<table>
<tr>
<td>
cell 1
</td>
<td>
cell 2
</td>
<td>
cell 3
</td>
<td>
cell 4
</td>
<td>
Cells are added and removed dynamically
</td>
</tr>
<tr>
<td class='fullWidth'>
this cell should be the full width of the table
</td>
</tr>
</table> 
  
 
 
 编辑：我试图保持这个问题简短和重点，所以我忽略了大部分细节。 ：P 
 
 我正在使用一个表，因为我在jQuery Datatable上使用Bootstrap的响应表 ，并且我需要插入一个自定义行来向某些行添加细节。 （Bootstrap的响应表已经使用了Datatables的默认“子”行功能，或者我会用它） 
How can I make a table with multiple rows that have different number of columns (but not always the same number .... columns can be added and removed dynamically) but still have the cells in each row take the full width of the row?
 
Of course, I'd like to use only CSS and avoid a Javascript solution.
 
Here is an example of my issue:
 
 
 
  
  
table{
border: solid;
}

td{
background-color: black;
color: white;
}

.fullWidth{
/* width: 100%; doesn't work */
} 
  
<table>
<tr>
<td>
cell 1
</td>
<td>
cell 2
</td>
<td>
cell 3
</td>
<td>
cell 4
</td>
<td>
Cells are added and removed dynamically
</td>
</tr>
<tr>
<td class='fullWidth'>
this cell should be the full width of the table
</td>
</tr>
</table> 
  
 
 
EDIT: I was trying to keep the question short and to the point, so I left out most of the details. :P
 
I am using a table because I am using Bootstrap's responsive tables on a jQuery Datatable, and I need to insert a custom row to add details to some of the rows. (Bootstrap's responsive tables already utilizes the default "child" row feature of Datatables, or I would have just used that)