Question

我有一个包含三个字段Sno Date和Amount的表。我需要Sno和Date左对齐，Amount仅右对齐。

在CSS中使用html表

css使用

thead tr th div,
tfoot tr td div {
  position: absolute;
  //color: #fff;
  //padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: -10px;
  line-height: normal;
  // left:0;
  // right:0;
  z-index: 2;
  //  text-align: center  !important;
  font-weight: bold;
  width: 100%;
}

由于position: absolute;无法设置text-align: right !important;

完整的css文件和html：

page-dsh-trd-det {
  .wrapper {
    width: 100%;
    position: relative;
    border: 1px solid #000;
    background: #efefef;
    overflow: hidden;
    border-radius: 7px;
  }
  .container {
    overflow-y: scroll;
    height: 85vh;
    padding: 0px;
    border-top: 41px solid transparent;
    border-bottom: 41px solid transparent;
    margin-left: 0px!important;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
  }
  td+td {
    border-left: 1px solid #fff;
  }
  td,
  th {
    border-bottom: 1px solid #fff;
    background: #efefef;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  thead tr th,
  tfoot tr td {
    height: 0;
    //line-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    // color: transparent;
    border: none;
    white-space: nowrap;
  }
  thead tr th div,
  tfoot tr td div {
    position: absolute;
    //color: #fff;
    //padding: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: -10px;
    line-height: normal;
    // left:0;
    // right:0;
    z-index: 2;
    //  text-align: center  !important;
    font-weight: bold;
    width: 100%;
  }
  thead tr th div {
    //border-left: 1px solid #000;
    // text-align: right  !important;
    border-bottom: 1px solid #000;
  }
  tfoot tr td div {
    //border-left: 1px solid #000;
    border-top: 1px solid #000;
  }
  thead tr th div {
    top: 0;
  }
  tfoot tr td div {
    bottom: 0;
  }
  thead tr th:first-child div,
  tfoot tr td:first-child div {
    border-left: none;
  }
}

<div class="content">
  <div width='100%'>
    <div class="left">
      <div class="wrapper">
        <div class="container">
          <table id="myTable">
            <thead>
              <tr>
                <th style="width:5%">
                  <div [style.background-color]="this.user.headercolor">Sno</div>
                </th>
                <th style="width:10%">
                  <div [style.background-color]="this.user.headercolor">Date</div>
                </th>
                <th style="width:15%">
                  <div [style.background-color]="this.user.headercolor">Amount</div>
                </th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试创建特定的CSS样式来实现。您可以拥有sed -E ':a;s/^((("[^"]*")*[^" ]*)*) /\1,/;ta' file，然后在HTML中调用它。像这样：

.text-right {text-align: right !important;}

.text-left {
  text-align: left !important
}

.text-right {
  text-align: right !important
}

无法将绝对位置thead th th div的单个div居中对齐

1 个答案: