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，可能需要为表本身和/或其单元格提供一些固定的宽度。

引导程序：在收合/展开期间将表大小水平固定

1 个答案: