Tournament brackets using only HTML tables and CSS

Question

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

Here's what I want to achieve:

Answer 1

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