[英]Pixel & Percent in a HTML-Table
我正在为足球(足球)游戏统计表格。
该表由以下几列组成(从左到右):
图标和分钟列的静态值应为(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;
}
}
使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.