плавающий текст и значок в HTML-таблице с помощью начальной загрузки - PullRequest
Новая
       33

плавающий текст и значок в HTML-таблице с помощью начальной загрузки

1 голос
/ 01 июля 2019

хочу дисплей как-то как, image.

Я пытался, 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">


<table class="table table-striped table-hover table-bordered">
  <thead class="text-center">
    <tr>
      <th>Service</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down fa-4x"></i></span><span class="text-center">8</span><span class="float-right"><i class="fas fa-caret-square-up fa-4x"></i></span></td>
  </tr>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down fa-4x"></i></span><span class="text-center">12</span><span class="float-right"><i class="fas fa-caret-square-up fa-4x"></i></span></td>
  </tr>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down fa-4x"></i></span><span class="text-center">4</span><span class="float-right"><i class="fas fa-caret-square-up fa-4x"></i></span></td>
  </tr>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down fa-4x"></i></span><span class="text-center">6</span><span class="float-right"><i class="fas fa-caret-square-up fa-4x"></i></span></td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Ответы [ 2 ]

1 голос
/ 01 июля 2019

Не рекомендуется добавлять отдельные классы для дочерних элементов , мы должны контролировать это из родительского элемента. Это может быть достигнуто с помощью Flexbox .

Сначала удалите float-left, text-center и float-right классы из дочерних элементов и просто добавьте d-flex, justify-content-between и align-items-center в родительский элемент td . Попробуйте это, я надеюсь, это поможет вам. Спасибо 

.fas {
  height: 56px;
  overflow: hidden;
}

.fas:before {
  margin-top: -4px;
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">


<table class="table table-striped table-hover table-bordered">
  <thead class="text-center">
    <tr>
      <th>Service</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tr>
    <td>--></td>
    <td class="d-flex justify-content-between align-items-center p-0">
      <i class="fas fa-caret-square-down fa-4x"></i>
      <span>8</span>
      <i class="fas fa-caret-square-up fa-4x"></i>
    </td>
  </tr>
  <tr>
    <td>--></td>
    <td class="d-flex justify-content-between align-items-center p-0">
      <i class="fas fa-caret-square-down fa-4x"></i>
      <span>12</span>
      <i class="fas fa-caret-square-up fa-4x"></i>
    </td>
  </tr>
  <tr>
    <td>--></td>
    <td class="d-flex justify-content-between align-items-center p-0">
      <i class="fas fa-caret-square-down fa-4x"></i>
      <span>4</span>
      <i class="fas fa-caret-square-up fa-4x"></i>
    </td>
  </tr>
  <tr>
    <td>--></td>
    <td class="d-flex justify-content-between align-items-center p-0">
      <i class="fas fa-caret-square-down fa-4x"></i>
      <span>6</span>
      <i class="fas fa-caret-square-up fa-4x"></i>
    </td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
0 голосов
/ 01 июля 2019

Вы можете сделать это, сделав родительский элемент position:relative, и для центрирования контента вы можете использовать position:absolute;left:50%;transform:translateX(-50%)

td {
  position: relative;
  padding: 0px!important;
  border: 0
}

span.text-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.table td {
  border: 0px!important
}

tr {
  line-height: 13px;
}

.fas {
  background: black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">


<table class="table table-striped table-hover table-bordered">
  <thead class="text-center">
    <tr>
      <th>Service</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down"></i></span><span class="text-center">8</span><span class="float-right"><i class="fas fa-caret-square-up"></i></span></td>
  </tr>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down"></i></span><span class="text-center">12</span><span class="float-right"><i class="fas fa-caret-square-up"></i></span></td>
  </tr>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down"></i></span><span class="text-center">4</span><span class="float-right"><i class="fas fa-caret-square-up"></i></span></td>
  </tr>
  <tr>
    <td>--></td>
    <td><span class="float-left"><i class="fas fa-caret-square-down"></i></span><span class="text-center">6</span><span class="float-right"><i class="fas fa-caret-square-up"></i></span></td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
...