La cosa non è così scontata. L'ingombro di una tabella, e suoi relativi elementi, è determinato dal proprio contenuto.
Un trucco, infatti, è quello di utilizzare un ulteriore div che avvolga il contenuto di ciascun td (o th), quindi lavorare su questo.
Potresti partire da una roba del genere:
codice:
<table class="table" >
<tr class="header">
<th>Prima riga</th>
</tr>
<tr>
<td><div>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</div></td>
</tr>
<tr class="header">
<th>Seconda riga</th>
</tr>
<tr>
<td><div>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</div></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table .header').on("click", function() {
$(this).toggleClass("active", "").nextUntil('.header')
.find('>td>div').slideToggle();
});
})
</script>
Eventualmente potresti anche creare il div al volo con una cosa tipo .wrapInner('<div />'), ma in tal caso andranno fatte opportune considerazioni.