Bootstrap: сохранить размер таблицы фиксированным по горизонтали во время свертывания / развертывания

Question

У меня действительно длинный текст в одном из столбцов моей таблицы.Поэтому я использую предоставленную при начальной загрузке кнопку «Свернуть / развернуть», чтобы скрыть / показать этот длинный текст (данные ячейки).

Но когда я нажимаю на кнопку, чтобы свернуть / развернуть текст, таблица мерцает и изменяется по горизонтали.

Как предотвратить изменение размера столбцов таблицы по горизонтали во время свертывания / развертывания данных этой таблицы?И разрешить расширение текста ТОЛЬКО по вертикали в пределах ширины этого столбца?

Ниже приведен HTML-код для справки.

<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

Используйте макет таблицы: исправлено css для вашей таблицы, и вам может потребоваться задать некоторую фиксированную ширину для самой таблицы и / или ее ячеек.