我的表格的其中一列中有很长的文字。所以我正在使用引导程序提供的折叠/展开按钮来隐藏/显示长文本(单元格数据)。

但是,当我单击按钮以折叠/展开文本时,表格会闪烁并水平调整大小。

在该表数据折叠/展开期间,如何防止表列水平调整大小?并允许仅在该列宽范围内垂直限制文本扩展吗?

以下是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>

最佳答案

使用表格布局:表格固定为CSS,您可能必须为表格本身和/或其单元格指定一些固定宽度。

10-05 20:39
查看更多