Question

嗨，我正在使用jquery数据表，并且每当我设置table-sm类来使表变小时，行与头部的行距都是不均匀的……我似乎无法找出为什么会发生这种情况

<div class="table-responsive">
                <table id="tblParametros" class="table table-sm table-bordered border-dark table-striped table-light text-center" width="100%">
                    <thead class="thead-dark">
                        <tr>
                            <th rowspan="2">Id</th>
                            <th rowspan="2">Referência</th>
                            <th rowspan="2">UAP</th>
                            <th rowspan="2">Dias</th>
                            <th rowspan="2">Turnos</th>
                            <th colspan="4">PAB(s)</th>
                            <th rowspan="2"></th>
                        </tr>
                        <tr>
                            <th>Nº</th>
                            <th>Alcance de Abastecimento</th>
                            <th>Quantidade Mínima</th>
                            <th>Quantidade Máxima</th>
                        </tr>
                    </thead>
                </table>
            </div>

<script>
     $(function () {
        table = $('#tblParametros').DataTable({
            scrollY: "60vh",
            ajax: {
                url: '@Url.Action("List","Parametros")',
                dataSrc: ""
            },
            columns: [
                { data: "id" },
                { data: "referencia" },
                { data: "uap" },
                { data: "numDias" },
                { data: "numTurnos" },
                { data: "numPAB" },
                { data: "alcanceAbastecimento" },
                { data: "qtdMin" },
                { data: "qtdMax" },
                {
                    data: "id",
                    render: function (data, type, row) {

                        return '<button class="btn btn-dark" onclick="EditParametro('+data+')" data-izimodal-open="#modal" data-izimodal-transitionin="fadeInDown">' +
                            '<i class="fas fa-edit"></i>' +
                            '</button>';
                    }
                }
            ]
        });
    });
</script>

是否可以在不创建CSS选择器的情况下缩小表行？我会很感激的

Answer 1

我无法确定目标是什么。如果我们想使表格行变窄，则可以定位包含div的目标

.table-responsive{
   width: 50%;
 }

如果我们要缩小行的文本，则：

.table-responsive{
   font-size: 50%;
 }

我很高兴阐述。

jQuery datatable正文行与标题行未对齐

1 个答案: