在GridView中使用jQuery DataTables与Bootstrap后列间距过大如何解决？

我完全懂你现在的困扰——功能都跑通了，但表格看起来松松垮垮的，列宽拉得太开、间距也大，视觉上特别不协调。咱们一步步来调整，把表格改得紧凑又美观。

先解决一个隐藏的坑：重复初始化DataTables #

看你的脚本代码，你不小心初始化了两次DataTables，这会导致样式和行为冲突，很可能是列宽失控的原因之一：

$(document).ready(function () {
    $('#ContentPlaceHolder1_dgvEmployees').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
        "responsive": true,
        "sPaginationType": "full_numbers"
    });
    // 这里的重复初始化必须删掉！
    $('#ContentPlaceHolder1_dgvEmployees').DataTable();
});

修改后的脚本，同时加入紧凑化配置：

$(document).ready(function () {
    $('#ContentPlaceHolder1_dgvEmployees')
        .prepend($("<thead></thead>").append($(this).find("tr:first")))
        .DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers",
            "autoWidth": false, // 关闭自动列宽，让我们手动控制
            "scrollX": true // 内容过宽时允许横向滚动，避免列被强行拉宽
        });
});

用CSS精细化控制列宽和间距 #

Bootstrap的table-sm已经是紧凑样式，但咱们再加自定义CSS进一步压缩：

/* 缩小表格容器的内边距，减少外部空白 */
.DIV.table-responsive {
    padding: 0;
}

/* 压缩单元格内边距，减少列内的空白空间 */
#ContentPlaceHolder1_dgvEmployees.table td,
#ContentPlaceHolder1_dgvEmployees.table th {
    padding: 0.3rem 0.5rem; /* 比默认的0.75rem紧凑很多，可按需调整 */
}

/* 给操作按钮列设置固定宽度，避免按钮列被无意义拉宽 */
#ContentPlaceHolder1_dgvEmployees td:nth-child(1),
#ContentPlaceHolder1_dgvEmployees td:nth-child(2),
#ContentPlaceHolder1_dgvEmployees td:nth-child(3) {
    width: 50px; /* 刚好放下图标按钮的宽度 */
    text-align: center; /* 按钮居中，视觉更整齐 */
}

/* 可选：给其他数据列也设置固定宽度，比如员工ID列 */
#ContentPlaceHolder1_dgvEmployees td:nth-child(4) {
    width: 120px;
}

把这段CSS放在页面的<style>标签里，或者全局CSS文件中，确保它在Bootstrap和DataTables的CSS之后加载，这样样式优先级更高，能覆盖默认样式。

优化GridView的配置 #

给GridView的操作列手动设置宽度，给DataTables一个明确的参考：

<asp:GridView ID="dgvEmployees" runat="server" CssClass="table table-borderless table-striped">
    <Columns>
        <asp:CommandField ButtonType="Image" SelectImageUrl="~/assets/img/icons/view.png" ShowSelectButton="true" SelectText="View">
            <ItemStyle Width="50px" HorizontalAlign="Center" />
        </asp:CommandField>
        <asp:CommandField ButtonType="Image" ShowEditButton="true" EditImageUrl="~/assets/img/icons/pencil.png">
            <ItemStyle Width="50px" HorizontalAlign="Center" />
        </asp:CommandField>
        <asp:CommandField ButtonType="Image" DeleteImageUrl="~/assets/img/icons/trashbin.png" ShowDeleteButton="true">
            <ItemStyle Width="50px" HorizontalAlign="Center" />
        </asp:CommandField>
    </Columns>
</asp:GridView>

手动设置ItemStyle.Width能避免DataTables自动过度拉伸列宽，让表格布局更可控。

最后验证效果 #

做完这些调整后刷新页面：

• 重复初始化的问题解决了，DataTables的行为会更稳定
• 操作列固定宽度、按钮居中，不会占用多余空间
• 单元格内边距缩小，整体间距变得紧凑
• 内容过宽时会横向滚动，不会强行拉宽所有列

按这个步骤来，应该就能得到你想要的紧凑美观的表格了！

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