html - 如何在表格中使用 HTML 单词对齐

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="col-md-12" style="padding: 10px">
  <div class="card m-b-30">
    <div class="card-header container-fluid">
      <div class="row ">
        @*
        <h2 class="card-title" style="padding: 10px">NAME</h2>*@
        <div align="right" class="col-md-10 float-right">
          <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-sm-12 ">
                        <table id="order-listing " class="table dataTable no-footer table-striped " role="grid " aria-describedby="order-listing_info ">
                          <thead class="col-md-6 ">
                            <tr role="row ">
                              <th class="col-md-6 "><b>Name</b></th>
                              <th class="col-md-6 "></th>
                              <th class="col-md-6 "></th>
                              <th class="col-md-6 "><b>Active</b></th>
                              <th class="col-md-6 "><b>Select</b></th>
                              <th class="col-md-6 "><b>Delete</b></th>
                              <th></th>
                            </tr>
                          </thead>
                          <tbody>

                            <tr class="row ">
                              <td width="10px "><input class="form-control " id="myInput " type="text " placeholder="Search.. " style="width: 350px; height: 30px " /><button type="button " class="btn
      btn-icons btn-inverse-secondary " id="data-member-editbtn-id " data-member-id="@@item.Id "><div class="col-sm-11 "><i class="dripicons-search "></i></div></button></td>
                              <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 style="text-align:right; " class="col-md-6 "><input class="form-check-input " type="checkbox " id="gridCheck " style="margin-right: 2px "></div>
                                  </div>


                                </div>
                              </td>

                            </tr>
                            <tr role="row " class="odd ">

                              <td class="col-md-6 ">gg</td>
                              <td class="col-md-6 "></td>
                              <td class="col-md-6 "></td>
                              <td style="text-align:right; " class="col-md-6 "><input class="form-check-input " type="checkbox " id="gridCheck " style="margin-right: 2px "></td>
                              <td style="text-align:right; " class="col-md-6 "><button type="button " class="btn btn-icons btn-inverse-secondary " id="data-member-editbtn-id " data-member-id="@*@item.Id*@
      "><div><i class="icon-pencil "></i></div></button></td>
                              <td style="text-align:right; " class="col-md-6 "><button type="button " class="btn btn-icons btn-inverse-secondary " id="data-member-delete-id " data-member-id="@*@item.Id*@
      "><div><i class="dripicons-trash "></i></div></button></td>
                              <td></td>

                            </tr>

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

我使用上面的代码使用html和css生成了以下界面，但我不知道如何对齐以下内容，如图所示。

下图显示了它应该如何可用。我需要上面的代码来输出如下图。请帮我

任何人都可以帮助我，我仍然是初学者，所以我不知道该怎么做。

标签： htmlcss

Answer 1

我稍微修改了您的代码，但这里完成了移动复选框的一般想法，因此请尝试以下代码：

<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-sm-12">
                                                    <table id="order-listing" class="table dataTable no-footer table-striped" 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>
                                                        <tr>
                                                                <td>
                                                                    <div class="form-group">
                                                                        <input class="form-control " id="myInput " type="text " placeholder="Search.. " style="width: 350px; height: 30px " /><button type="button " class="btn
      btn-icons btn-inverse-secondary " id="data-member-editbtn-id " data-member-id="@@item.Id "><div class="col-sm-11 "><i class="dripicons-search "></i></div></button>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <input type="checkbox" name="checkbox2">
                                                                </td>
                                                                <td>
                                                                    <input type="checkbox" name="checkbox3">
                                                                </td>
                                                                <td><input type="checkbox" name="checkbox4"></td>

                                                            </tr>


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