如何用JavaScript调整Django模板中表格的显示样式使其正常？

问题分析 #

从代码和显示效果来看，表格异常大概率是HTML拼写错误、DataTables插件未正确初始化或样式冲突导致的，无需复杂JS逻辑，从基础调整入手即可解决。

步骤1：修复HTML拼写错误 #

表格标签里有个笔误：cellsacing="0" 需改为 cellspacing="0"，这个小错误会导致单元格间距异常。

步骤2：确保依赖资源引入 #

你用到了Bootstrap样式（table、btn等类）和DataTables的display类，需在模板头部引入对应CSS和JS文件：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">

<!-- jQuery（DataTables依赖） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

步骤3：正确初始化DataTables #

在模板底部添加JS代码初始化表格，确保列对齐、表头正常显示：

<script>
$(document).ready(function() {
    $('#contractTable').DataTable({
        ordering: true,
        autoWidth: false,
        // 强制指定列宽，避免错位
        columnDefs: [
            { width: '12%', targets: 0 },
            { width: '20%', targets: 1 },
            { width: '10%', targets: 2 },
            { width: '12%', targets: 3 },
            { width: '12%', targets: 4 },
            { width: '8%', targets: 5 },
            { width: '12%', targets: 6 },
            { width: '14%', targets: 7 }
        ],
        responsive: true
    });
});
</script>

步骤4：优化模板代码（修正后的完整表格） #

<table id="contractTable" class="display normal table cell-border" cellspacing="0" style="width:100%">
    <thead>
    <tr>
        <th class="text-center"><p class="fw-light">ID</p></th> <!-- 给空表头加名称，避免空白占位异常 -->
        <th class="text-center"><p class="fw-light">Contract</p></th>
        <th class="text-center" style="width: 10%"><p class="fw-light">Current</p></th>
        <th class="text-center"><p class="fw-light">Total</p></th>
        <th class="text-center"><p class="fw-light">Total_2</p></th>
        <th class="text-center" style="width: 10%"><p class="fw-light">% </p></th>
        <th class="text-center"><p class="fw-light">Type</p></th>
        <th class="text-center"><p class="fw-light">Files</p></th>
    </tr>
    </thead>
    <tbody>
    {% for contract in list_of_contracts %}
        <tr>
            <td class="text-center">{{ contract.CounterpartyGUID }}</td>
            <td class="text-center">{{ contract.ContractName }}</td> <!-- 加text-center保持列对齐 -->
            <td class="text-center">{{ contract.Currency }}</td>
            <td class="text-center">{{ contract.SumContractWithoutVAT|floatformat:0|intcomma }}</td>
            <td class="text-center">{{ contract.SumContractWithVAT|floatformat:0|intcomma }}</td>
            <td class="text-center">{{ contract.VAT|floatformat:0 }}</td>
            <td class="text-center">{{ contract.ContractType }}</td>
            <td class="text-center">
                <form action="" method="post" class="mb-0"> <!-- 加mb-0去掉表单默认margin，避免行高异常 -->
                    {% csrf_token %}
                    <input type="hidden" name="ref_key" value="{{ contract.ContractGUID }}">
                    <input type="hidden" name="contract_name" value="{{ contract.ContractName }}">
                    <input type="hidden" name="object_name" value="{{ object_name }}">
                    <input type="submit" class="btn btn-outline-primary btn-sm" value="Files"> <!-- 用btn-sm缩小按钮适配列宽 -->
                </form>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

关键调整说明 #

• 给第一列空表头添加名称，避免空白导致的布局偏移
• 统一所有列的text-center类，保持内容对齐
• 优化表单和按钮样式，避免撑大单元格或行高异常
• 通过DataTables强制指定列宽，确保表头与内容列严格对齐

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