В моей таблице 3 столбца. 2 из них должны быть выровнены влево, а третий - вправо. Можете ли вы, пожалуйста, помочь мне достичь этого?Выровнять столбцы таблицы влево и вправо
Я пробовал несколько методов, и последний, который я пробовал, находится в этом коде, ничего не работает должным образом. Цель, которую я хочу достичь, это то, что значок, который находится в последнем столбце, останется там, даже когда кто-то изменит размер браузера.
Мой HTML код
<div class="panel-meals">
<div class="table-meals">
<table>
<tr>
<td>200</td>
<td>abc</td>
<td><i class="ti-exchange-vertical"></i></td>
</tr>
<tr>
<td>50</td>
<td>abc</td>
<td><i class="ti-exchange-vertical"></i></td>
</tr>
<tr>
<td>300</td>
<td>abc</td>
<td><i class="ti-exchange-vertical"></i></td>
</tr>
<tr>
<td>1</td>
<td>Lemon</td>
<td><i class="ti-exchange-vertical"></i></td>
</tr>
</table>
</div>
и CSS (SCSS)
.panel-meals {
.table-meals {
word-spacing: 1px;
margin-left: 151px;
border-left: 1px solid #c6c6c6;
font-weight: 600;
font-size: 13px;
td {
text-align: left;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
td:nth-child(2n+2) {
text-align: left;
padding-left: 37px;
}
td:nth-child(3n+3) {
text-align: right;
padding-right: 200px;
color: $grey;
i {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
}
}
Connexo, спасибо за ваш ответ. Я пробовал оба метода, но они не работают. Значки все еще находятся в том же положении, рядом с их следующей колонкой. Есть ли у вас какие-либо другие идеи, как это решить?) – JZK
У вас все еще есть 'padding-right: 200px;' на вашей третьей колонке? – connexo
Нет, я удалил его и вместо этого попробовал разные paddings и поля, но с 0 или неправильным эффектом – JZK