6

Is there a way to display tournament bracket using only HTML table and CSS?

Here's what I want to achieve:

example tournament bracket

Jeremy
  • 1
  • 85
  • 340
  • 366
mark yorky
  • 193
  • 1
  • 5
  • 17

4 Answers4

2

You can wrap the elements inside a position: relative; div element and than you can use position: absolute; nested div

Demo

Now obviously this will be a tedious process but you can use classes to track particular points but this is the best you can achieve with pure CSS.

For the last dashed div you can use the following snippet to achieve that effect

.last {
   border: 1px dashed #000;
   border-top: 1px solid #000;
   border-left: 0;
   /* Top Left for positioning */
}

Demo 2

Last but not the least, table won't be a good thing for this

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
0

Take a look at https://stackoverflow.com/a/262584/1592764. There's a markup for a table-based bracket along with a jsfiddle.

Here's the HTML:

<table summary="Tournament Bracket" class="bracket">
<tr>
    <th>National Semi-Finals<br>Saturday November 8th</th>
    <th>National Championship<br>Sunday November 9th</th>
    <th>NJCAA National Champion</th>
</tr>
<tr>
    <td><p>#1 Manchester CC (17-2-1)</p></td>
    <td rowspan="2"><p></p></td>
    <td rowspan="4"><p></p></td>
</tr>
<tr>
    <td><p>#4 Triton College (13-4-0)</p></td>
</tr>
<tr>
    <td><p>#2 Herkimer County CC (18-3-0)</p></td>
    <td rowspan="2"><p></p></td>
</tr>
<tr>
    <td><p>#3 County College of Morris (17-3-0)</p></td>
</tr>
</table>

and the CSS:

   table.bracket {
    border-collapse: collapse;
    border: none;
}

.bracket td {
    vertical-align: middle;
    width: 40em;
    margin: 0;
    padding: 10px 0px 10px 0px;
}

.bracket td p {
    border-bottom: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    margin: 0;
    padding: 5px 5px 5px 5px;
}

.bracket th{
    text-align:center;
}

EDIT: modified the CSS above to get it closer to the look you want. Here's a jsfiddle - http://jsfiddle.net/4KZ6T/236/

Community
  • 1
  • 1
Marcatectura
  • 1,721
  • 5
  • 30
  • 49
  • Answers that rely on an external link are discouraged. Please edit your answer to include enough information that it would still answer the question if the link broke in the future. :) – Jeremy Sep 02 '13 at 04:46
  • @Marcatectura, how do I apply the borders on the right side or left side of the table cell to make it look like the image above? – mark yorky Sep 02 '13 at 15:58
  • see the edit and jsfiddle above. Using CSS and the border property, you can easily do something like this. You can find the spec at http://www.w3schools.com/css/css_border.asp – Marcatectura Sep 02 '13 at 17:29
0

I see a table with 10 columns and 30 rows counting from top(Winners bracket) to bottom(Double elimination ...)

Make the table with this format, but make sure you do reset the padding and margins of the page with: * {padding: 0; margin: 0 auto;}

The next step will be to put the table in a div and ID'it #tableBody, and then start working on your table with Elem1 etc...until you reach 30 rows and 10 columns

Daniel Andrei Mincă
  • 4,446
  • 2
  • 19
  • 30
0

My version. Screenshot

https://codepen.io/grozzzny/pen/GRZNxqW

<div class="playoff-table">
<div class="playoff-table-content">
    <div class="playoff-table-tour">
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
    </div>
    <div class="playoff-table-tour">
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
    </div>
    <div class="playoff-table-tour">
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
    </div>
    <div class="playoff-table-tour">
        <div class="playoff-table-group">
            <div class="playoff-table-pair playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
            <div class="playoff-table-third-place playoff-table-pair-style">
                <div class="playoff-table-left-player">Иванов</div>
                <div class="playoff-table-right-player">Сидоров</div>
            </div>
        </div>
    </div>
</div>
Dmitry
  • 1
  • 1