Как выровнять флажок с указанным столбцом в таблице HTML

Question

<div class="col-md-12" style="padding: 10px">
                    <div class="card m-b-30">
                        <div class="card-header container-fluid" ">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-12 table-responsive">
                                            <div id="order-listing_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <table id="order-listing" class="table dataTable no-footer table-striped" style="border-bottom:1pt solid black" role="grid" aria-describedby="order-listing_info">
                                                            <thead>
                                                                <tr role="row">
                                                                    <th width="70%"><b>Name</b></th>
                                                                    <th><b>Active</b></th>
                                                                    <th><b>Select</b></th>
                                                                    <th><b>Delete</b></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @*@foreach (var item in Model)
                                                                    {*@
                                                                <tr>
                                                                    <td>
                                                                        <div class="input-group">
                                                                            <input type="text" class="form-control" placeholder="Search here" style="width: 450px; height: 40px">
                                                                            <div class="input-group-append">
                                                                                <button class="btn btn-secondary" type="button">
                                                                                    <i class="dripicons-search"></i>
                                                                                </button>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td>
                                                                        <input type="checkbox" name="checkbox2">
                                                                    </td>
                                                                </tr>
                                                                <tr>

                                                                    <td>Test New</td>
                                                                    <td><input class="form-check-input" type="checkbox" id="gridCheck"></td>
                                                                    <td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-editbtn-id"><div><i class="icon-pencil"></i></div></button></td>
                                                                    <td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-delete-id"><div><i class="dripicons-trash"></i></div></button></td>


                                                                </tr>


                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Я попытался выровнять этот флажок со столбцом Active, но мой код не совмещает его с указанным столбцом. Что не так с моим кодом? некоторые онлайн HTML генерируют на выходе правильный код с тем же кодом, но когда я редактирую его, выравнивание не работает должным образом

Я прикрепил мой код выше, может кто-нибудь помочь мне с использованием html и css для этого.

Answer 1

Пожалуйста, укажите ниже CSS, элемент ввода занимает CSS поля слева.

.form-check-input{
 margin:0 !important;
}

А также укажите это CSS

.table td, .table th{
  vertical-align: middle;
 }