我正在爲應用程序構建基本佈局的最後一步,但似乎有問題,這可能是行高的一個基本問題。%行高問題
我有一個表被5行損害,每個表的高度都爲%,所有行顯示的都不是最後一行「其他」,而它應該與高度相同其他人正在變小,有沒有人有任何建議?
https://jsfiddle.net/2222aho0/2/
<table class="table table-bordered table-condensed" style="height: 100%; overflow: hidden;border-collapse: collapse !important;">
<tr style="height: 5%;">
<th></th>
<th class="text-center">
01
</th>
<th class="text-center">
02
</th>
<th class="text-center">
03
</th>
<th class="text-center">
04
</th>
<th class="text-center">
05
</th>
<th class="text-center">
06
</th>
<th class="text-center">
07
</th>
<th class="text-center">
08
</th>
<th class="text-center">
09
</th>
<th class="text-center"> 10
</th>
<th class="text-center"> 11
</th>
<th class="text-center"> 12
</th>
<th class="text-center"> 13
</th>
<th class="text-center"> 14
</th>
<th class="text-center"> 15
</th>
<th class="text-center"> 16
</th>
<th class="text-center"> 17
</th>
<th class="text-center"> 18
</th>
<th class="text-center"> 19
</th>
<th class="text-center"> 20
</th>
<th class="text-center"> 21
</th>
<th class="text-center"> 22
</th>
<th class="text-center"> 23
</th>
<th class="text-center"> 24
</th>
<th class="text-center"> 25
</th>
<th class="text-center"> 26
</th>
<th class="text-center"> 27
</th>
<th class="text-center"> 28
</th>
<th class="text-center"> 29
</th>
<th class="text-center"> 30
</th>
<th class="text-center"> 31
</th>
</tr>
<tr style="padding: 0px; height: 25%">
<td class="text-center" style="text-align: center; vertical-align:middle; padding: 0px;">
<b>
<a href="/dmi">DMI</a></b>
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
</tr>
<tr style="padding: 0px; height: 25%">
<td class="text-center" style="text-align: center; vertical-align:middle; padding: 0px;">
<b>Eurosport</b>
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
</tr>
<tr style="padding: 0px; height: 25%">
<td class="text-center" style="text-align: center; vertical-align:middle; padding: 0px;">
<b>ADM</b>
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
<a data-modal="true" href="/races/42/edit">
<i class="fa fa-circle fa-custom" id="container" style="color:#ffffff">
</i>
</a>
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
</tr>
<tr style="padding: 0px; height: 25%">
<td class="text-center" style="text-align: center; vertical-align:middle; padding: 0px;">
<b>Other</b>
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
<td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 25% ">
</td>
</tr>
</table>
是它有必要擁有所有內聯的CSS?您是否使用佈局庫(如引導程序)或製作更可編輯的佈局?也許所有這些都是由某種東西產生的?就像,你有一堆class =「」聲明,而不是內聯「樣式」重複,只是爲類分配style =「padding:0px; vertical-align:top; width:3%; height:25%」 ,並將其應用到元素中。 –
剛注意到你正在使用Bootstrap,但它深深地打動了我,你在同一行上有內聯樣式,就像有一個類一樣。你也使用非編碼的「<<」作爲你的按鈕文本,這將驅動瀏覽器堅果(<>爲標籤保留)。 –