仅使用 HTML 表格和 CSS 的锦标赛括号 [英] Tournament brackets using only HTML tables and CSS

问题描述

有没有办法只使用 HTML 表格和 CSS 来显示锦标赛括号?

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

这是我想要实现的目标:

Here's what I want to achieve:

推荐答案

您可以将元素包裹在 position:relative; div 元素中，然后您可以使用 <代码>位置:绝对；嵌套div

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

演示

现在显然这将是一个乏味的过程，但您可以使用类来跟踪特定点，但这是使用纯 CSS 可以实现的最佳效果.

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.

对于最后一个dashed div，您可以使用以下代码段来实现该效果

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 */
}

演示 2

最后但并非最不重要的一点，table 对此不会有什么好处

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

这篇关于仅使用 HTML 表格和 CSS 的锦标赛括号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！