html - HTML 表格中的像素和百分比

Question

我正在制作足球(橄榄球)比赛的统计表。

该表由以下列组成(从左到右):

• 图标
• 文本(发生了什么)
• 分钟
• 文本(发生了什么)
• 图标

图标和分钟栏应该有一个静态的(50 像素和 80 像素)。文本列的宽度应可变。

现在到了棘手的部分...如果表格在同一行中有一个包含内容的文本列和一个没有内容的文本列，则分钟列不再居中。见:

它应该是这样的:

代码如下:

<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; 这样，没有获得特定宽度的列将在它们之间平均“划分”其余宽度。

Working Fiddle

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>