2017-07-27 52 views
0

我正在爲應用程序構建基本佈局的最後一步,但似乎有問題,這可能是行高的一個基本問題。%行高問題

我有一個表被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>

+2

是它有必要擁有所有內聯的CSS?您是否使用佈局庫(如引導程序)或製作更可編輯的佈局?也許所有這些都是由某種東西產生的?就像,你有一堆class =「」聲明,而不是內聯「樣式」重複,只是爲類分配style =「padding:0px; vertical-align:top; width:3%; height:25%」 ,並將其應用到元素中。 –

+0

剛注意到你正在使用Bootstrap,但它深深地打動了我,你在同一行上有內聯樣式,就像有一個類一樣。你也使用非編碼的「<<」作爲你的按鈕文本,這將驅動瀏覽器堅果(<>爲標籤保留)。 –

回答

1

5%+ 25%+ 25%+ 25%+ 25%= 105%

那是太多了,所以它減少了最後一排。嘗試設置23.75%,爲4個大列及其所有td小號

編輯:高度設定爲20%時,它的工作原理

編輯2:改變的代碼:

<body style="margin: 0px;"> 
    <div class="container-fluid" style="height: 100%; width: 98%"> 
    <div id="modal-holder"></div> 
    <div class="row"> 
     <div class="col-md-4"> 

     </div> 
     <div class="col-md-4" style="text-align: center;"> 
     <img onclick="fullScreenApi.requestFullScreen(document.documentElement)" src="/assets/logo-38c16937efd336760ec865ac27be45d30c1f3e72a1b1db0754cfb6aa6dad9a96.png" alt="Logo" width="200" height="81" /> 
     </div> 
     <div class="col-md-4"> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-12"> 


     </div> 
    </div> 
    <br> 
    <br> 
    <div class="row"> 
     <br> 
     <h3 style="margin: 5px;">July 2017</h3> 
     <a href="/?m=6&amp;y=2017"> 
     <button type="button" class="btn btn-sm"> 
      << Previous Month</button> 
     </a> 
     <a href="/"> 
     <button type="button" class="btn btn-primary btn-sm">This Month</button> 
     </a> 
     <a href="/?m=8&amp;y=2017"> 
     <button type="button" class="btn btn-sm">Next Month >></button> 
     </a> 
     <a data-modal="true" href="/races/new">Create race</a> 
    </div> 
    <div class="row" style="flex:1; height: 100%;"> 
     <div class="table-responsive" style="margin: 5px; height: 40%; overflow: hidden"> 
     <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"> 20 
      </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: 20%"> 
      <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: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      </tr> 
      <tr style="padding: 0px; height: 20%"> 
      <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: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      </tr> 
      <tr style="padding: 0px; height: 20%"> 
      <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: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
       <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: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      </tr> 
      <tr style="padding: 0px; height: 20%"> 
      <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: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      <td class="" style="padding: 0px; vertical-align: top; width: 3%; height: 20% "> 
      </td> 
      </tr> 
     </table> 
     </div> 
     <center> 
     <ul class="list-inline" style="margin: 5px;"> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#085bf5"></i>&nbsp;US</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#ede909"></i>&nbsp;South Africa</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#f50505"></i>&nbsp;Japan</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#0ce7f2"></i>&nbsp;Italy</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#fc7a0f"></i>&nbsp;Australia</li> 
      <br> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#990ef5"></i>&nbsp;Germany</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#14700e"></i>&nbsp;Singapore</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#000000"></i>&nbsp;Eurosport</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#ffffff"></i>&nbsp;ADM</li> 
      <li class="list-group-item"> 
      <i class="fa fa-circle fa-2x" style="color:#966363"></i>&nbsp;Hong Kong</li> 
     </ul> 
     </center> 
    </div> 

    </div> 
    </div> 
    </div> 
+0

完全合乎邏輯的假設,完全不知道爲什麼我沒有發現它。它似乎沒有任何區別,但 –

+0

後一些擺弄它與20%的所有工作 – Looki