[英]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.