Как выровнять, используя 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 и I понятия не имею, как выровнять следующее, как показано на рисунке.

На рисунке ниже показано, как оно должно быть доступно. Мне нужен код выше для вывода, как на картинке ниже. Пожалуйста, помогите мне

Кто-нибудь может мне помочь, я еще новичок, поэтому я понятия не имею, как это сделать.

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>