html - 左右对齐表格列

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

解决您的问题。对于这种特定情况，:nth-child(3) 的替代方法是使用邻近的选择器 +:

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