Bootstrap table with multiple row - css

Question

I want a "large" table to be beautiful in both mobile devices and desktop. Without x-scrolling.
One way, I think, is to create a table row which is high (two rows, with rowspan=2).
But is there a smoother and more good-looking way to make this? This example below is okay, but I still think it's possible to make the result more clean and nicer.
One problem is also that I can't use ant filter plugins and pagination, as the scripts think that one row is two rows.
Any ideas?
<div class="container">
<div class="table-responsive">
<table class="table">
<tbody>
<tr class="bg-danger">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Christian A</h4></div>
</td>
<td>
<h4 class="pull-right">133 €</h4></td>
</tr>
<tr class="bg-danger">
<td colspan=2>
2014-05-05 - Not paid
</td>
</tr>
<tr class="bg-success">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Nicolaus S</h4></div>
</td>
<td>
<h4 class="pull-right">122 €</h4></td>
</tr>
<tr class="bg-success">
<td colspan=2>
2014-05-05 - Payed
</td>
</tr>
</tbody>
</table>
</div>
</div>
http://jsfiddle.net/weuf6vb3/