Как поместить Botton прямо рядом с таблицей HTML-строки данных начальной загрузки - PullRequest
Новая
       27

Как поместить Botton прямо рядом с таблицей HTML-строки данных начальной загрузки

0 голосов
/ 04 ноября 2018

Я хочу сделать кнопку рядом с данными таблицы в каждой строке данных таблицы. Я попытался создать новый столбец, чтобы поместить кнопку, но на ней есть граница. Я хочу это без рамки, просто кнопка. Я использую Bootstrap 4 для этого

это мой HTML 

<div class="card-body col-10">
          <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Password</th>
                  <th>Phone</th>
                  <th>Privilege</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Password</th>
                  <th>Phone</th>
                  <th>Privilege</th>
              </tfoot>
              <tbody>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System@you.com</td>
                  <td>Edinburgh</td>
                  <td>081290188409</td>
                  <td>1</td>
                </tr>
               
                                 
              </tbody>
            </table>
          </div>
        </div>

я хочу сделать кнопку справа от таблицы рядом с привилегией, кнопка не является таблицей.

Я пытался сделать из этого таблицу, как в этом коде 

<div class="card-body col-1">
      <div class="tablen float-left">
        <table class="table table-borderless" id="dataTable" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><button type="button" class="btn btn-danger fas fa-table float-left"></button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

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

1 Ответ

0 голосов
/ 04 ноября 2018

С JQuery вы можете использовать это,

Это может быть решено с помощью CSS3: раньше тоже, но я не знаю точный синтаксис для него.

так вот код JQuery 

$("td").each(function (){
    $(this).append("<button type='button' class='btn btn-danger fas fa-table float-left'></button>" );
});
...