如何设置DataTable输入框宽度自适应？ColdFusion数据表格响应式列消失问题解决

针对你遇到的输入框宽度过大、响应式模式下列消失的问题，我整理了两个核心调整方案，结合你的ColdFusion和代码结构来修改：

一、让输入框宽度自适应单元格 #

默认输入框的宽度会撑大单元格，我们可以通过Bootstrap类+自定义CSS让输入框完全适配单元格宽度，同时保持紧凑：

修改ColdFusion中的输入框代码 #

给所有<input>标签添加class="form-control form-control-sm"，并通过内联样式强制宽度100%（也可以用外部CSS统一控制）：

<table style="width: 100%;" id="todayTransactionTable" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Beginning Balance</th>
<th>Cash Debit</th>
<th>Wires<BR>Received</th>
<th>Returned<BR>Checks</th>
<th>Redeposits</th>
<th>Ch2</th>
<th>Checks Cashed2</th>
<th>Fees Collected2</th>
<th>Ch3</th>
<th>Checks Cashed3</th>
<th>Fees Collected3</th>
<th>Save</th>
</tr>
</thead>
<tbody>
<cfloop query="getCCTransactions">
<cfoutput>
<tr>
<td>#dateFormat(workdate, 'mm/dd/yyyy')#</td>
<td><input type="number" class="form-control form-control-sm" value="#balance#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#cashorder#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#wires#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#returnedChecks#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#redeposits#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#checks2#" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#checksCashed2#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#feesCollected2#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#checks3#" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#checksCashed3#" step="0.01" style="width: 100%;" /></td>
<td><input type="number" class="form-control form-control-sm" value="#feesCollected3#" step="0.01" style="width: 100%;" /></td>
<td><a class="mb-2 mr-2 btn-icon btn-pill btn btn-link">Update</a></td> <!-- 修正了标签闭合错误 -->
</tr>
</cfoutput>
</cfloop>
</tbody>
</table>

• form-control-sm让输入框更紧凑，适配表格的窄布局
• style="width: 100%;"强制输入框填满单元格，不会超出边界

如果不想写内联样式，也可以用外部CSS统一控制：

#todayTransactionTable input.form-control {
    width: 100% !important;
    min-width: 80px; /* 可选：设置最小宽度，避免屏幕过小时输入框太窄 */
}

二、解决响应式模式下列消失的问题 #

DataTables的responsive: true默认会在屏幕较小时隐藏“优先级低”的列，我们可以通过以下方式自定义控制：

方案1：指定列的可见性优先级 #

在DataTables配置中添加columnDefs，给重要列设置更高的优先级（数值越小越不容易被隐藏）：

$( document ).ready(function() {
    $('#todayTransactionTable').DataTable({
        responsive: true,
        "pageLength": 50,
        "order": [[ 0, "desc" ]],
        "columnDefs": [
            // 给核心列设置高优先级
            { "responsivePriority": 1, "targets": 0 }, // Date列
            { "responsivePriority": 2, "targets": 1 }, // Beginning Balance列
            { "responsivePriority": 3, "targets": 12 }, // Save操作列
            // 其他列设置较低优先级，屏幕窄时优先隐藏
            { "responsivePriority": 10, "targets": "_all" }
        ]
    });
});

方案2：开启响应式细节面板 #

如果不想隐藏任何列，可以开启细节面板，让放不下的列自动放到每行的展开区域中：

$( document ).ready(function() {
    $('#todayTransactionTable').DataTable({
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.childRowImmediate,
                type: 'none'
            }
        },
        "pageLength": 50,
        "order": [[ 0, "desc" ]]
    });
});

方案3：手动设置列宽度 #

给表头添加固定宽度，避免列被过度压缩：

<!-- 在<th>标签中添加width属性 -->
<th width="10%">Date</th>
<th width="12%">Beginning Balance</th>
<!-- 其他列按需设置宽度比例 -->

这样调整后，输入框会完美适配单元格宽度，同时响应式模式下也能更合理地展示所有列内容。

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