테이블 열 좌우 정렬

Question

테이블에 3 개의 열이 있습니다. 그들 중 2 명은 왼쪽으로, 3 명은 오른쪽으로 정렬해야합니다. 그걸 성취하도록 도와 주시겠습니까?

저는 여러 가지 방법을 시도했으며 마지막으로 시도한 것은이 코드에 있습니다. 아무 것도 올바르게 작동하지 않습니다. 목표, 내가 달성하고 싶은 것은 누군가가 브라우저의 크기를 조정하더라도 마지막 열에있는 아이콘입니다.

내 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); 
    } 
    } 
} 
} 

Answer 1

사용

.table-meals { 
    td { text-align: left; } 
    td:nth-child(3) { text-align: right; } 
} 

이다. , 답변 주셔서 감사합니다

.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>