html - 仅使用 HTML 表格和 CSS 的锦标赛分组

Question

有没有办法只使用 HTML 表格和 CSS 来显示锦标赛分组？

这是我想要实现的目标:

Answer 1

您可以将元素包装在 position: relative; div 元素中，然后可以使用 position: absolute; 嵌套 分区

Demo

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

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

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

Demo 2

最后但同样重要的是，table 对此不是一件好事