Material 设计复选框在数据表中创建一个新行

Question

有人用这个吗link

我正在尝试使用此复选框

他们的tag是这样的

<input type="checkbox" id="md_checkbox_1" class="chk-col-red" checked />
<label for="md_checkbox_1">RED</label>

但是我正在尝试将其合并到数据表及其工作中。这是示例

问题是复选框旁边的标签是空的我想知道为什么它在下面创建这么大space。

我很沮丧尝试所有的可能性只是为了消除有人遇到这个吗？

这是我添加复选框的代码

var link = '../../php/submit_mail.php?key_id=' + arr_id.join();
        DTable = $('#tbl_user').DataTable({
                    "destroy": true,
                    "order": [],
                    "bProcessing": true,
                    "aLengthMenu": [[10,25, 50, 75, -1], [10,25, 50, 75, "All"]],
                    "iDisplayLength": 10,
                    "sAjaxSource": link,
                    'columnDefs': [{
                        'targets': 0,
                        'render': function (data, type, row, meta){
                            return '<input type="checkbox" id="md_checkbox_' + data + '" class="filled-in chk-col-blue chkall">' +
                                   '<label for="md_checkbox_' + data + '"></label>';
                        }
                    },
                    { targets: 0, orderable: false },
                    { className: "custom_right", "targets": [1] },
                    ],
                    "aoColumns": [
                        { mData: 'id' },
                        { mData: 'col1' }
                    ]
                });

Answer 1

你必须改变 [类型="checkbox"] +标签{ 高度：22px； } 标签 { 底部边距：0px； }

Answer 2

尝试将此添加到您的 CSS:

[type="checkbox"] + label {
    vertical-align: middle;
}

Material 设计复选框在数据表中创建一个新行

Material Design checkbox creates a new row when inside datatables

html

css

datatables

materialize