有没有办法只使用 HTML 表格和 CSS 来显示锦标赛括号？
这是我想要实现的目标：
问问题
9123 次
4 回答
2
您可以将元素包装在一个position: relative; div元素内，而不是使用position: absolute;嵌套div
现在显然这将是一个乏味的过程，但是您可以使用类来跟踪特定点，但这是使用纯 CSS 可以实现的最佳效果。
最后dashed div，您可以使用以下代码段来实现该效果
.last {
border: 1px dashed #000;
border-top: 1px solid #000;
border-left: 0;
/* Top Left for positioning */
}
最后但并非最不重要table的一点，这不会是一件好事
于 2013-09-02T04:51:51.797 回答
0
看看https://stackoverflow.com/a/262584/1592764。有一个基于表格的括号和一个 jsfiddle 的标记。
这是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>
和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;
}
编辑：修改了上面的 CSS 以使其更接近您想要的外观。这是一个 jsfiddle - http://jsfiddle.net/4KZ6T/236/
于 2013-09-02T04:45:11.393 回答
0
我看到一张有 10 列和 30 行的表格，从顶部（获胜者括号）到底部（双淘汰 ...）
使用这种格式制作表格，但请确保使用以下命令重置页面的填充和边距：* {padding: 0; 边距：0 自动；}
下一步是将表格放入一个 div 和 ID'it #tableBody，然后开始使用 Elem1 等处理您的表格......直到达到 30 行和 10 列
于 2013-09-02T04:47:05.477 回答
0
我的版本。 截屏
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>
于 2020-08-21T15:29:28.883 回答