html - 如何将复选框与表格 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>

我尝试将此复选框与活动列对齐，但我的代码未将其与指定列对齐我的代码有什么问题？一些在线 HTML 使用相同的代码生成输出正确的代码，但是当我编辑它时，对齐不能正常工作

我在上面附上了我的代码，任何人都可以帮助我为此使用 html 和 css。

标签： htmlcss

Answer 1

请给出下面的 CSS，输入元素采用 margin-left 的 CSS。

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

也给这个CSS

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