My table has 3 columns. 2 of them needs to be aligned left, and 3th one right. Can you please help me to achieve that ?
I've tried several methods and the last one I've tried is in this code, nothing works properly. Goal, what I want to achieve is that icon, which is in the last column will stays there even when somebody resizes the browser.
My HTML code is
<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>
and 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);
}
}
}
}
Use
.table-meals {
td { text-align: left; }
td:nth-child(3) { text-align: right; }
}
to solve your problem. An alternative to :nth-child(3)
for this specific case is to use the neighboring selector +
instead:
.table-meals {
td { text-align: left; }
td + td + td { text-align: right; }
}
.panel-meals .table-meals {
word-spacing: 1px;
margin-left: 151px;
border-left: 1px solid #c6c6c6;
font-weight: 600;
font-size: 13px;
}
.panel-meals .table-meals table {
background-color: yellow;
width: 100%;
}
.panel-meals .table-meals td {
background-color: #ddd;
text-align: left;
}
.panel-meals .table-meals td:nth-child(2) {
background-color: #c0c0c0;
}
.panel-meals .table-meals td:nth-child(3) {
background-color: #f0f0f0;
text-align: right;
color: #ddd;
}
.panel-meals .table-meals td:nth-child(3) i:after {
transform: rotate(90deg);
content: "✔";
}
<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>