Tabellenspalten links und rechts ausrichten

Question

Meine Tabelle hat 3 Spalten. 2 von ihnen müssen links ausgerichtet werden, und 3. rechts. Kannst du mir bitte helfen, das zu erreichen?

Ich habe verschiedene Methoden ausprobiert und die letzte, die ich ausprobiert habe, ist in diesem Code, nichts funktioniert einwandfrei. Ziel, was ich erreichen möchte, ist, dass das Symbol, das in der letzten Spalte steht, auch dann erhalten bleibt, wenn jemand die Größe des Browsers ändert.

Mein HTML-Code ist

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

und 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

Verwenden

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

Ihr Problem zu lösen. Eine Alternative zu :nth-child(3) für diesen speziellen Fall ist das benachbarte Selektor + stattdessen zu verwenden:

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