html - HTML テーブルのピクセルとパーセント

Question

私はサッカー (フットボール) ゲームの統計テーブルに取り組んでいます。

この表は、次の列で構成されています (左から右へ)。

• アイコン
• テキスト（何が起こったのか）
• 分
• テキスト（何が起こったのか）
• アイコン

アイコンと分の列には、(50px と 80px) のスタティックが必要です。テキスト列の幅は可変にする必要があります。

ここで注意が必要なのが...テーブルにコンテンツのあるテキスト列と同じ行にないテキスト列がある場合、分の列はもう中央に配置されません。見る：

それは次のようになります。

コードは次のとおりです。

<table class="table-comparison">
  <thead>
    <th colspan="5">
      Wechsel
    </th>
  </thead>
  <tbody>
    <tr>
      <td class="column-action"><i class="icon-rotate-left"></i></td>
      <td class="column-text text-right">
        <i class="icon-caret-right color-green"></i> Sradan Lakic für <i class="icon-caret-right color-red-light"></i> Stefan Aigner
      </td>
      <td class="column-center" data-toggle="move:insertBefore" data-target="$el.parent().find('td:first-child')">46'</td>
      <td class="column-text">
        <div>
          <i class="icon-caret-right color-green"></i> Mario Götze für <i class="icon-caret-right color-red-light"></i> Toni Kroos
          </div>
          <div>
          <i class="icon-caret-right color-green"></i> Emre Can für <i class="icon-caret-right color-red-light"></i> Thiago Alcantara
        </div>
      </td>
      <td class="column-action"><i class="icon-rotate-left"></i></td>
    </tr>
    <tr>
      <td class="column-action"><i class="icon-rotate-left"></i></td>
      <td class="column-text text-right">
        <i class="icon-caret-right color-green"></i> Sebastion Jung für <i class="icon-caret-right color-red-light"></i> Marco Russ
      </td>
      <td class="column-center" data-toggle="move:insertBefore" data-target="$el.parent().find('td:first-child')">88'</td>
      <td class="column-text"></td>
      <td class="column-action"></td>
    </tr>
  </tbody>
</table>

そしてCSS：

// ------------------------------

.table-comparison {
  color: @black;
  width: 100%;

  th, td {
    padding: 10px 0;
  }

  th {
    .interstate;
    .uppercase;
    color: @black;
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 15px;

    @media @tablet {
      padding-bottom: 35px;
      text-align: center;
    }
  }

  .column-action {
    padding-left: 20px; 
    padding-right: 20px;
    text-align: center;
    width: 20px;

    @media @phone {
      display: none;
    }
  }
  .column-text {
    padding-left: 20px; 
    padding-right: 20px;

    @media @phone {
      display: block;
      height: auto;
      text-align: left;
      width: 100%;
    }
  }
  .column-center {
    .interstate;
    text-align: center;
    width: 80px;

    @media @phone {
      display: block;
      height: auto;
      padding-left: 20px;
      text-align: left;
      width: 100%;
    }

    @media @tablet {
      border-left: 1px solid @grey-medium;
      border-right: 1px solid @grey-medium;
    }
  }

  // stripe that shit down
  // stripe down the tables
  > tbody > tr:nth-child(even) > td,
  > tbody > tr:nth-child(even) > th {
    background-color: #f7f7f7;
  }

  > tbody > tr:nth-child(odd) > td,
  > tbody > tr:nth-child(odd) > th {
    background-color: transparent;
  }
}