Я хотел добавить значок с всплывающей подсказкой к таблице bootstrap, и ничего себе не удалось. кажется, что он выравнивает стиль слева, и мне бы хотелось, чтобы он был ближе к тому, на что ссылается иконка / подсказка.
Так что, если вы посмотрите на эту ссылку:
JSFIDDLE
Вы должны заметить, что независимо от размера таблицы, столбец «CPU» толкает столбец слева от него до самого левого поля поля. Таблица.
(это изображение того, как оно выглядит, когда шрифт awesome действительно работает) ... Изображение показывает безумный разрыв между 'flair' и описанием процессора. Кто-нибудь знает, почему он дает столбцу CPU такой безумный причал?
введите описание ссылки здесь
.product-table {
margin-top: 50px;
th {
color: $dark-gray;
padding: 20px 7px;
i {
color: $green;
font-size: 26px;
}
}
a {
color: $text;
&:hover {
color: $green;
text-decoration: none;
}
}
.product-table-body {
border: 1px solid $lightest-gray;
td {
padding: 15px 7px;
}
tr:nth-child(2n+1) {
background-color: $lightest-gray;
}
}
}
<section>
<h2 class="text-center">Things and Stuff</h2>
<div class="table-responsive">
<table class="w-100 text-center product-table">
<tr>
<th></th>
<th><i class="fal fa-microchip"></i><br>CPU</th>
<th><i class="fal fa-database"></i><br>Storage</th>
<th><i class="fal fa-memory"></i><br>RAM</th>
<th><i class="fal fa-desktop"></i><br>IPs</th>
<th><i class="fal fa-tachometer-alt-fast"></i><br>Bandwidth</th>
<th><i class="fal fa-hand-holding-usd"></i><br>Monthly</th>
<th></th>
</tr>
<tr>
<td>
<span style="color: #6e9c23;">
<i class="fal fa-fire fa-2x" data-toggle="tooltip" data-placement="left" title="Recommended"></i>
</span>
</td>
<td><a href="whatever" rel="nofollow">Xeon E3-1245v5 (4x3.5GHz)</a></td>
<td>1x1TB</td>
<td>16GB</td>
<td>5</td>
<td>10000GB</td>
<td>$89</td>
<td><div class="d-inline-block"><a href="/order/step-1/151" class="btn btn-green btn-circle" rel="nofollow"><i class="fas fa-chevron-right"></i></a></div></td>
</tr>
</table>
</div>
</section>