Pixel & Percent in a HTML-Table - html

Question

I'm working on a stats table for soccer(Football) games.
The table consists of the following columns (from left to right):
icon
text (what happend)
minute
text (what happend)
icon
The icon & minute columns should have a static with (50px & 80px). The text columns should be variable in width.
Now to the tricky part... if the table has a text column with content and one without in the same row the minute column isn't centered anymore. See:
That's how it should look like:
Here is the code:
<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>
and the 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

use table-layout:fixed; that way, the column that did't get specific width, will 'divide' the rest of the width evenly between them.
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>