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

Answer 1

使用table-layout:fixed;这种方式，没有获得特定宽度的列将在它们之间平均“划分”其余的宽度。

工作小提琴

CSS

.table-comparison
{
    width: 100%;
    table-layout: fixed;
}
.iconColumn
{
    width: 50px; /*fixed width*/
}
.textColumn
{
    /*you dont have to fix the width*/
}
.minuteColumn
{
    width: 80px; /*fixed width*/
}

/* this part is taken from gvee's solution*/
.table-comparison tr td:first-child, .table-comparison tr td:last-child {
    color: red;
    background-color: #ddd;
    text-align: center;
}

.table-comparison tr td:nth-child(3) {

    background-color: lime;
    text-align: center;
}

HTML

<table class="table-comparison">
    <thead>
    <th class='iconColumn'></th>
    <th class='textColumn'></th>
    <th class='minuteColumn'></th>
    <th class='textColumn'></th>
    <th class='iconColumn'></th>
    </thead>
    <tbody>
        <tr>
            <td><i>i</i></td>
            <td></td>
            <td>46'</td>
            <td>
                <div> <i>G</i>Mario Götze für<i>R</i>Toni Kroos</div>
                <div> <i>G</i> Emre Can für <i>R</i> Thiago Alcantara</div>
            </td>
            <td><i>i</i>

            </td>
        </tr>
        <tr>
            <td><i>i</i> 
            </td>
            <td></td>
            <td>88'</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>