Freddy Wetson Freddy Wetson - 2 years ago 45
CSS Question

% Row Height Issues

I'm in the final throws of putting together a basic layout for an application but seem to be having, what is probably a basic issue with the row heights.

I have a table which is compromised of 5 rows, each of which has a % value for the height, all of the rows are displaying fine other than the last row "other" which whilst it should be the same height as the others is coming up smaller, does anyone have any suggestions?

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>


J

Answer Source

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

That's too much, so it cuts the last row. Try setting 23.75% for the 4 bigger rows and all their tds

Edit: it works when setting the heights to 20%

Edit 2: Changed Code:

<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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download