DataTables中dtr-control图标与数据重叠，求动态宽度解决方案

表格中的数字与dtr-control的加号图标发生重叠（参考图：）。尝试过margin-left、padding等CSS样式调整，但需要实现数据宽度动态适配：当数据内容较多时，图标不与数据重叠；当数据内容较少时，图标可贴近数据。

相关代码如下：

JS配置 #

columns: [
          {
            class: "dtr-control",
            orderable: false,
            data: null,
          },

CSS样式 #

td.dtr-control {
    background: url('http://54.71.139.38:10087/details_open.d165c81e176a2e60.png')
    no-repeat center center;
    cursor: pointer;
    width: 70px;
}

HTML结构 #

<div class="row ">
    <div class="table-responsive">
        <table id="table_id" class="display" style="width:100%;margin-top:50px!important;">
            <thead>
                <tr>
                    <th scope="col">No</th>
                    <th scope="col">App Version</th>
                    <th scope="col">App Type</th>
                    <th scope="col">App Description</th>
                    <th scope="col">App Url</th>
                    <th scope="col">Device Type</th>
                    <th scope="col">Supported OS</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

方案1：调整背景图位置与内边距（最简实现） #

去掉固定宽度，将图标定位到单元格右侧，给图标预留固定空间，内容自动填充左侧：

td.dtr-control {
    background: url('http://54.71.139.38:10087/details_open.d165c81e176a2e60.png') no-repeat right center;
    cursor: pointer;
    width: auto; /* 取消固定宽度，自适应内容 */
    padding-right: 30px; /* 给右侧图标留空间 */
    padding-left: 10px; /* 避免内容贴边 */
}

此方案下，内容多的时候会占用左侧全部空间，图标始终在右侧不重叠；内容少的时候图标会自动贴近内容。

方案2：Flex布局精细化控制 #

用Flex容器分离内容区和图标区，彻底避免空间冲突：

td.dtr-control {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: auto;
    padding: 8px;
}

/* 用伪元素替代背景图作为图标 */
td.dtr-control::after {
    content: '';
    width: 20px;
    height: 20px;
    margin-left: auto; /* 强制图标靠右 */
    background: url('http://54.71.139.38:10087/details_open.d165c81e176a2e60.png') no-repeat center center;
    background-size: contain;
}

这种方式灵活性更高，内容和图标完全独立，适配各种内容长度。

方案3：从DataTables结构上分离 #

确保dtr-control列仅承载图标，数字内容放在单独的列中，从根源解决重叠：

columns: [
    {
        class: "dtr-control",
        orderable: false,
        data: null,
        defaultContent: '' // 该列仅用于显示图标
    },
    { data: 'id', title: 'No' }, // 单独的No列存放数字
    // 以下对应其他表头列：App Version、App Type等
    { data: 'version', title: 'App Version' },
    { data: 'type', title: 'App Type' },
    // ...其余列配置
]

同时调整CSS，让dtr-control列保持合适的最小宽度：

td.dtr-control {
    background: url('http://54.71.139.38:10087/details_open.d165c81e176a2e60.png') no-repeat center center;
    cursor: pointer;
    min-width: 30px; /* 仅保证图标显示空间 */
}

内容的提问来源于stack exchange，提问作者Sahil Khan