Jump to content

Dynamic Table

Staggan

By Staggan
in PHP Coding Help

 Share

Recommended Posts

Staggan Member

Staggan

Posted
Posted (edited)

Hello

I am finishing off my tournament code and am having a problem getting it to display nicely.

 

My code is based off the class_knockout by Nicholas Rathman...

 

Here is my array of results

 
$rounds = array(
//Round 1
array(

array(
'c1' => 'UA07 ',
's1' => 6 ,
'c2' => 'Ultimate Force ',
's2' => 8 ,
),

array(
'c1' => 'UF HEROES',
's1' => 6,
'c2' => 'OLD School',
's2' => 4,
),

array(
'c1' => 'Winners 05 ',
's1' => 'not_played',
'c2' => 'World XI',
's2' => 'not_played',
),

array(
'c1' => 'Outlaw',
's1' => 4,
'c2' => 'UWK',
's2' => 3,
),

),
//Round 2
array(
array(
'c1' => 'Ultimate Force',
's1' => 2,
'c2' => 'UF HEROES',
's2' => 4,
),

array(
'c1' => 'BY',
's1' => 0,
'c2' => 'Outlaw',
's2' => 0,
),

),
//Round 3
array(
array(
'c1' => 'UF HEROES',
's1' => 5,
'c2' => 'Outlaw',
's2' => 1,
),

)
);
 

And here is my code to create my table

 
$roundCount = 1;
$totalRounds = count($rounds);

echo '<table border="1"><tr>';

for($i = 1;$i <= $totalRounds;$i++)
{
echo '<td>Round'.$i.'</td>';
}
echo '</tr><tr>';
foreach($rounds as $round)
{
$matches = count($round);
echo '<td>';


foreach($round as $match)
{
echo '<table border="1">';
echo '<tr><td>'.$match['c1'].'</td><td>'.$match['s1'].'</td></tr>';
echo '<tr><td>'.$match['c2'].'</td><td>'.$match['s2'].'</td></tr>';
echo '</table>';
}
$roundCount++;
echo '</td>';
}

echo '</tr></table>';
 

As part of my function to get the results array I also return the winning team name... and I am trying to add this as a final column to the table but every time I do it I end up with the winning team name everywhere except as a final column...
 

Finally, we have some CSS done, which uses a hard coded set of results, when trying to convert this and integrate into my dynamic table I end up with broken lines and badly positioned results...

This is the hard coded table and the CSS:

 

16 Team Table

 

 
<div class="wrapper">
 
<section class="tournament-results">
<div class="row">
<div class="large-12 columns text-center">
<h2 class="section-title">TOURNAMENTS</h2>
<h3 class="section-sub-title">RESULTS</h3>
</div>
</div>
<div class="row">
 
 
 
<table class="results-16">
<tr>
<td class="round-1">
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
</td><!-- round-1 -->
<td class="round-2">
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
</td><!-- round-2 -->
<td class="round-3">
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
</td><!-- round-3 -->
<td class="round-4">
<table>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="team">
<span class="color" style="background:#00ff00;"></span> 
<span class="name">UA07</span>
<span class="points">6</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- results-16 -->
 
 
Edited by Staggan
Link to comment
https://forums.phpfreaks.com/topic/287966-dynamic-table/
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

I don't think this is really a PHP problem, but more an HTML/CSS problem. Looking at your code above, I see that it is a tournament bracket - but there is no CSS code so I'm probably not seeing the intended output. I'm also not sure where you are wanting to display the winning team in the output. What you should do is build a static page (i.e. no PHP just HTML/CSS) to have the page display how you want it using sample data. Once you have the output you want - THEN you would modify your PHP code to output the variable data into the same format.

Link to comment
https://forums.phpfreaks.com/topic/287966-dynamic-table/#findComment-1477144
Share on other sites
Staggan Member

Staggan

Posted
  • Author
Posted

Hello

 

Sorry, I thought the CSS was posted as well, so have now amended the post with the CSS.

 

We currently have a dynamic system which builds a table on the fly from the results, whether it be an 8 team tournament, 32 or 64. 

What we are trying to do is format that dynamic table output so that it looks nice, without having to hardcode multiple tables for set sizes of competition.

 

What I did was try and take the manually created tables and add the formatting to my table generation, and whilst most of it worked I ran into some problems. 

 

The lines between games and the spacing of the teams in the columns does not work correctly and I am not sure how to solve this.

Here is a link to how the manual bracket looks: http://new.playdat.com/tournament-results.php
 

How can I get this result from my automatic table generation?

Link to comment
https://forums.phpfreaks.com/topic/287966-dynamic-table/#findComment-1477148
Share on other sites
Staggan Member

Staggan

Posted
  • Author
Posted

I don't seem to be able to edit the post.. so here is the CSS for the manual table

 

 

 
 
 
/******** Tournaments Page **********/
.tournaments .section-title {
  margin-top: 40px; }
.tournaments ul li {
  width: 99%;
  min-height: 106px;
  margin-bottom: 10px;
  padding: 10px 20px;
  background: white;
  background: -moz-linear-gradient(top, white 0%, #e9e9e9 52%, #e0e0e0 62%, #e4e4e4 79%, #dedede 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(52%, #e9e9e9), color-stop(62%, #e0e0e0), color-stop(79%, #e4e4e4), color-stop(100%, #dedede));
  background: -webkit-linear-gradient(top, white 0%, #e9e9e9 52%, #e0e0e0 62%, #e4e4e4 79%, #dedede 100%);
  background: -o-linear-gradient(top, white 0%, #e9e9e9 52%, #e0e0e0 62%, #e4e4e4 79%, #dedede 100%);
  background: -ms-linear-gradient(top, white 0%, #e9e9e9 52%, #e0e0e0 62%, #e4e4e4 79%, #dedede 100%);
  background: linear-gradient(to bottom, white 0%, #e9e9e9 52%, #e0e0e0 62%, #e4e4e4 79%, #dedede 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede', GradientType=0 );
  -webkit-box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75); }
  .tournaments ul li .tournament-detail {
    float: left; }
    .tournaments ul li .tournament-detail h3 {
      font: 700 31px/32px "Titillium Web", sans-serif; }
    .tournaments ul li .tournament-detail h6 {
      font: normal 18px "Titillium Web", sans-serif; }
      .tournaments ul li .tournament-detail h6 span,
      .tournaments ul li .tournament-detail h6 strong {
        color: #123d62; }
  .tournaments ul li .sign-up {
    display: block;
    float: right;
    width: 150px;
    margin-top: 24px;
    padding: 6px 0;
    font: 700 18px "Titillium Web", sans-serif;
    color: #fff;
    text-align: center;
    border: 1px solid #076cc7;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    background: #75befd;
    background: -moz-linear-gradient(top, #75befd 0%, #0e72ca 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #75befd), color-stop(100%, #0e72ca));
    background: -webkit-linear-gradient(top, #75befd 0%, #0e72ca 100%);
    background: -o-linear-gradient(top, #75befd 0%, #0e72ca 100%);
    background: -ms-linear-gradient(top, #75befd 0%, #0e72ca 100%);
    background: linear-gradient(to bottom, #75befd 0%, #0e72ca 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75befd', endColorstr='#0e72ca', GradientType=0 ); }
  .tournaments ul li .view-results {
    display: block;
    float: right;
    width: 150px;
    margin-top: 24px;
    padding: 6px 0;
    font: 700 18px "Titillium Web", sans-serif;
    color: #fff;
    text-align: center;
    border: 1px solid #2c2c2c;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    background: #838383;
    background: -moz-linear-gradient(top, #838383 0%, #393939 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #838383), color-stop(100%, #393939));
    background: -webkit-linear-gradient(top, #838383 0%, #393939 100%);
    background: -o-linear-gradient(top, #838383 0%, #393939 100%);
    background: -ms-linear-gradient(top, #838383 0%, #393939 100%);
    background: linear-gradient(to bottom, #838383 0%, #393939 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838383', endColorstr='#393939', GradientType=0 ); }
 
.tournament-results .results-4 {
  width: 100%;
  margin-top: 60px;
  background: none;
  border-collapse: collapse; }
  .tournament-results .results-4 tr {
    background: none; }
  .tournament-results .results-4 .round-1 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-4 .round-1 tr:nth-child(2) td {
      padding-bottom: 10px;
      border-top: 2px solid #123d62;
      border-right: 2px solid #123d62; }
    .tournament-results .results-4 .round-1 tr:nth-child(1) td {
      border-right: 2px solid #123d62; }
    .tournament-results .results-4 .round-1 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 2px solid transparent; }
    .tournament-results .results-4 .round-1 table:nth-child(even) tr:nth-child(2) td {
      border-right: 2px solid transparent; }
    .tournament-results .results-4 .round-1 .team {
      border-radius: 0px 10px 10px 0px;
      -moz-border-radius: 0px 10px 10px 0px;
      -webkit-border-radius: 0px 10px 10px 0px; }
  .tournament-results .results-4 .round-2 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-4 .round-2 tr td {
      padding: 0 20px;
      padding-right: 0; }
    .tournament-results .results-4 .round-2 tr:nth-child(2) td {
      padding-bottom: 30px;
      border-top: 2px solid #123d62; }
    .tournament-results .results-4 .round-2 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 56px; }
    .tournament-results .results-4 .round-2 .team,
    .tournament-results .results-4 .round-2 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-4 table {
    width: 100%;
    background: none; }
    .tournament-results .results-4 table td {
      padding: 0;
      padding-right: 20px; }
      .tournament-results .results-4 table td .team {
        font: normal 18px "Open Sans", sans-serif;
        background: white;
        background: -moz-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #d4d4d4));
        background: -webkit-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -o-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -ms-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: linear-gradient(to bottom, white 0%, #d4d4d4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0 ); }
        .tournament-results .results-4 table td .team:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden; }
        .tournament-results .results-4 table td .team .color {
          display: block;
          float: left;
          width: 50px;
          height: 50px; }
        .tournament-results .results-4 table td .team .name {
          display: inline-block;
          margin-top: 13px;
          margin-left: 10px; }
        .tournament-results .results-4 table td .team .points {
          float: right;
          margin-top: 12px;
          margin-right: 14px;
          font-weight: bold; }
.tournament-results .results-8 {
  width: 100%;
  margin-top: 60px;
  background: none;
  border-collapse: collapse; }
  .tournament-results .results-8 tr {
    background: none; }
  .tournament-results .results-8 .round-1 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-8 .round-1 tr td {
      padding-right: 20px;
      border-right: 2px solid transparent; }
    .tournament-results .results-8 .round-1 tr:nth-child(2) td {
      padding-bottom: 30px;
      border-top: 2px solid #123d62; }
    .tournament-results .results-8 .round-1 table:nth-child(1) tr:nth-child(2) td {
      border-right: 2px solid #123d62; }
    .tournament-results .results-8 .round-1 table:nth-child(2) tr:nth-child(1) td {
      border-right: 2px solid #123d62; }
    .tournament-results .results-8 .round-1 table:nth-child(3) tr:nth-child(2) td {
      border-right: 2px solid #123d62; }
    .tournament-results .results-8 .round-1 table:nth-child(4) tr:nth-child(1) td {
      border-right: 2px solid #123d62; }
    .tournament-results .results-8 .round-1 .team {
      border-radius: 0px 10px 10px 0px;
      -moz-border-radius: 0px 10px 10px 0px;
      -webkit-border-radius: 0px 10px 10px 0px; }
  .tournament-results .results-8 .round-2 {
    padding: 0;
    vertical-align: middle; }
    .tournament-results .results-8 .round-2 tr td {
      padding: 0 20px;
      border-right: 2px solid transparent; }
    .tournament-results .results-8 .round-2 tr:nth-child(2) td {
      padding-bottom: 30px;
      border-top: 2px solid #123d62;
      border-right: 2px solid #123d62; }
    .tournament-results .results-8 .round-2 table:nth-child(2) td {
      border-right: 0; }
    .tournament-results .results-8 .round-2 table:nth-child(2) tr:nth-child(1) td {
      padding-top: 120px;
      border-right: 2px solid #123d62; }
    .tournament-results .results-8 .round-2 .team {
      border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px; }
    .tournament-results .results-8 .round-2 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-8 .round-3 {
    padding: 0;
    vertical-align: middle; }
    .tournament-results .results-8 .round-3 tr td {
      padding: 0 20px;
      padding-right: 0; }
    .tournament-results .results-8 .round-3 tr:nth-child(2) td {
      padding-bottom: 30px;
      border-top: 2px solid #123d62; }
    .tournament-results .results-8 .round-3 .team,
    .tournament-results .results-8 .round-3 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-8 table {
    width: 100%;
    background: none; }
    .tournament-results .results-8 table td {
      padding: 0; }
      .tournament-results .results-8 table td .team {
        font: normal 18px "Open Sans", sans-serif;
        background: white;
        background: -moz-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #d4d4d4));
        background: -webkit-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -o-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -ms-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: linear-gradient(to bottom, white 0%, #d4d4d4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0 ); }
        .tournament-results .results-8 table td .team:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden; }
        .tournament-results .results-8 table td .team .color {
          display: block;
          float: left;
          width: 50px;
          height: 50px; }
        .tournament-results .results-8 table td .team .name {
          display: inline-block;
          margin-top: 13px;
          margin-left: 10px; }
        .tournament-results .results-8 table td .team .points {
          float: right;
          margin-top: 12px;
          margin-right: 14px;
          font-weight: bold; }
.tournament-results .results-16 {
  width: 100%;
  margin-top: 60px;
  background: none;
  border-collapse: collapse; }
  .tournament-results .results-16 tr {
    background: none; }
  .tournament-results .results-16 .round-1 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-16 .round-1 tr:nth-child(2) td {
      padding-bottom: 10px;
      border-top: 1px solid #123d62;
      border-right: 1px solid #123d62; }
    .tournament-results .results-16 .round-1 tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-16 .round-1 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-16 .round-1 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-16 .round-1 .team {
      border-radius: 0px 10px 10px 0px;
      -moz-border-radius: 0px 10px 10px 0px;
      -webkit-border-radius: 0px 10px 10px 0px; }
  .tournament-results .results-16 .round-2 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-16 .round-2 td {
      padding-left: 10px; }
    .tournament-results .results-16 .round-2 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-16 .round-2 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 26px; }
    .tournament-results .results-16 .round-2 table:nth-child(2) tr:nth-child(1) td {
      padding-top: 76px; }
    .tournament-results .results-16 .round-2 table:nth-child(3) tr:nth-child(1) td {
      padding-top: 70px; }
    .tournament-results .results-16 .round-2 table:nth-child(4) tr:nth-child(1) td {
      padding-top: 76px; }
    .tournament-results .results-16 .round-2 table:nth-child(odd) tr:nth-child(2) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-16 .round-2 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-16 .round-2 table:nth-child(even) tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-16 .round-2 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-16 .round-2 .team {
      border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px; }
    .tournament-results .results-16 .round-2 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-16 .round-3 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-16 .round-3 td {
      padding-left: 10px; }
    .tournament-results .results-16 .round-3 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-16 .round-3 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 86px; }
    .tournament-results .results-16 .round-3 table:nth-child(2) tr:nth-child(1) td {
      padding-top: 200px; }
    .tournament-results .results-16 .round-3 table:nth-child(odd) tr:nth-child(2) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-16 .round-3 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-16 .round-3 table:nth-child(even) tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-16 .round-3 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-16 .round-3 .team {
      border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px; }
    .tournament-results .results-16 .round-3 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-16 .round-4 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-16 .round-4 td {
      padding-left: 10px;
      padding-right: 0; }
    .tournament-results .results-16 .round-4 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-16 .round-4 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 220px; }
    .tournament-results .results-16 .round-4 .team,
    .tournament-results .results-16 .round-4 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-16 table {
    width: 100%;
    background: none; }
    .tournament-results .results-16 table td {
      padding: 0;
      padding-right: 10px; }
      .tournament-results .results-16 table td .team {
        padding: 0;
        font: normal 14px "Open Sans", sans-serif;
        background: white;
        background: -moz-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #d4d4d4));
        background: -webkit-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -o-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -ms-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: linear-gradient(to bottom, white 0%, #d4d4d4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0 ); }
        .tournament-results .results-16 table td .team:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden; }
        .tournament-results .results-16 table td .team .color {
          display: block;
          float: left;
          width: 25px;
          height: 25px; }
        .tournament-results .results-16 table td .team .name {
          display: inline-block;
          margin-left: 10px;
          margin-top: 3px; }
        .tournament-results .results-16 table td .team .points {
          float: right;
          margin-right: 14px;
          margin-top: 2px;
          font-weight: bold; }
.tournament-results .results-32 {
  width: 100%;
  margin-top: 60px;
  background: none;
  border-collapse: collapse; }
  .tournament-results .results-32 .round-1 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-32 .round-1 tr:nth-child(2) td {
      padding-bottom: 10px;
      border-top: 1px solid #123d62;
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-1 tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-1 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-1 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-1 .team {
      border-radius: 0px 10px 10px 0px;
      -moz-border-radius: 0px 10px 10px 0px;
      -webkit-border-radius: 0px 10px 10px 0px; }
  .tournament-results .results-32 .round-2 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-32 .round-2 td {
      padding-left: 10px; }
    .tournament-results .results-32 .round-2 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-32 .round-2 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 30px; }
    .tournament-results .results-32 .round-2 table:nth-child(2) tr:nth-child(1) td {
      padding-top: 70px; }
    .tournament-results .results-32 .round-2 table:nth-child(3) tr:nth-child(1) td {
      padding-top: 76px; }
    .tournament-results .results-32 .round-2 table:nth-child(4) tr:nth-child(1) td {
      padding-top: 70px; }
    .tournament-results .results-32 .round-2 table:nth-child(5) tr:nth-child(1) td {
      padding-top: 66px; }
    .tournament-results .results-32 .round-2 table:nth-child(6) tr:nth-child(1) td {
      padding-top: 74px; }
    .tournament-results .results-32 .round-2 table:nth-child(7) tr:nth-child(1) td {
      padding-top: 70px; }
    .tournament-results .results-32 .round-2 table:nth-child( tr:nth-child(1) td {
      padding-top: 72px; }
    .tournament-results .results-32 .round-2 table:nth-child(odd) tr:nth-child(2) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-2 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-2 table:nth-child(even) tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-2 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-2 .team {
      border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px; }
    .tournament-results .results-32 .round-2 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-32 .round-3 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-32 .round-3 td {
      padding-left: 10px; }
    .tournament-results .results-32 .round-3 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-32 .round-3 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 86px; }
    .tournament-results .results-32 .round-3 table:nth-child(2) tr:nth-child(1) td {
      padding-top: 200px; }
    .tournament-results .results-32 .round-3 table:nth-child(3) tr:nth-child(1) td {
      padding-top: 190px; }
    .tournament-results .results-32 .round-3 table:nth-child(4) tr:nth-child(1) td {
      padding-top: 190px; }
    .tournament-results .results-32 .round-3 table:nth-child(odd) tr:nth-child(2) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-3 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-3 table:nth-child(even) tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-3 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-3 .team {
      border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px; }
    .tournament-results .results-32 .round-3 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-32 .round-4 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-32 .round-4 td {
      padding-left: 10px; }
    .tournament-results .results-32 .round-4 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-32 .round-4 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 200px; }
    .tournament-results .results-32 .round-4 table:nth-child(2) tr:nth-child(1) td {
      padding-top: 446px; }
    .tournament-results .results-32 .round-4 table:nth-child(odd) tr:nth-child(2) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-4 table:nth-child(odd) tr:nth-child(1) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-4 table:nth-child(even) tr:nth-child(1) td {
      border-right: 1px solid #123d62; }
    .tournament-results .results-32 .round-4 table:nth-child(even) tr:nth-child(2) td {
      border-right: 1px solid transparent; }
    .tournament-results .results-32 .round-4 .team {
      border-radius: 10px 10px 10px 10px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px; }
    .tournament-results .results-32 .round-4 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-32 .round-5 {
    padding: 0;
    vertical-align: top; }
    .tournament-results .results-32 .round-5 td {
      padding-left: 10px;
      padding-right: 0; }
    .tournament-results .results-32 .round-5 table tr:nth-child(2) td {
      border-top: 1px solid #123d62; }
    .tournament-results .results-32 .round-5 table:nth-child(1) tr:nth-child(1) td {
      padding-top: 440px; }
    .tournament-results .results-32 .round-5 .team,
    .tournament-results .results-32 .round-5 .color {
      border-radius: 10px 0px 0px 10px;
      -moz-border-radius: 10px 0px 0px 10px;
      -webkit-border-radius: 10px 0px 0px 10px; }
  .tournament-results .results-32 table {
    width: 100%;
    background: none; }
    .tournament-results .results-32 table tr {
      background: none; }
    .tournament-results .results-32 table td {
      padding: 0;
      padding-right: 10px; }
      .tournament-results .results-32 table td .team {
        font: normal 14px "Open Sans", sans-serif;
        background: white;
        background: -moz-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #d4d4d4));
        background: -webkit-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -o-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: -ms-linear-gradient(top, white 0%, #d4d4d4 100%);
        background: linear-gradient(to bottom, white 0%, #d4d4d4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0 ); }
        .tournament-results .results-32 table td .team:after {
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden; }
        .tournament-results .results-32 table td .team .color {
          display: block;
          float: left;
          width: 25px;
          height: 25px; }
        .tournament-results .results-32 table td .team .name {
          display: inline-block;
          margin-left: 10px;
          margin-top: 3px; }
        .tournament-results .results-32 table td .team .points {
          float: right;
          margin-right: 14px;
          margin-top: 2px;
          font-weight: bold; }
 
Link to comment
https://forums.phpfreaks.com/topic/287966-dynamic-table/#findComment-1477149
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.