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

为您的表格使用 table-layout: fixed css，您可能需要为表格本身和/或其单元格提供一些固定宽度。