Bootstrap: Maintain table size fixed horizontally during collapse/expand - html

Question

I have a really long text in one of the column of my table. So I am using bootstrap provided collapse/expand button to hide/show that long text (cell data).
But when I click on the button to collapse/expand the text, the table flickers and gets resized horizontally.
How do I prevent the table columns from re-sizing horizontally during collapse/expand of that table data ? And allow the expansion of text ONLY vertically limited within that column width ?
Below is the HTML for reference.
<table id="query_table" class="table table-bordered table-striped table-hover">
<thead>
<th>ID</th>
<th>Name</th>
<th>Topic</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>9</td>
<td>ORDER_ZONE</td>
<td>2018-06-18 21:47:31.0</td>
<td>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample_9" aria-expanded="true"
aria-controls="collapseExample_9">
Show/hide Description
</button>
<div class="collapse" id="collapseExample_9">
<div class="card card-body">
SOME VERY VERY VERY VERY LONG TEXT HERE
</div>
</div>
</td>
</tr>
<tr>
<td>9</td>
<td>ORDER_ZONE</td>
<td>2018-06-18 21:47:31.0</td>
<td>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample_10" aria-expanded="true"
aria-controls="collapseExample_10">
Show/hide Description
</button>
<div class="collapse" id="collapseExample_10">
<div class="card card-body">
ANOTHER VERY VERY VERY VERY LONG TEXT HERE
</div>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

Use table-layout: fixed css for your table and you might have to give some fixed width for table itself and/or its cells.