％行高问题

Question

我正在为应用程序组合一个基本布局，但似乎有，这可能是行高的基本问题。

我有一个受到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>

Answer 1

5％+ 25％+ 25％+ 25％+ 25％= 105％

那太多了，所以它削减了最后一排。尝试为4个较大的行和所有td s

设置23.75％

修改：将高度设置为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>