Question

有没有办法只使用HTML表和CSS显示锦标赛支架？

这就是我想要实现的目标：

example tournament bracket

Answer 1

您可以将元素包含在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 */
}

Demo 2

最后但并非最不重要的是，table对于此

来说不是一件好事

Answer 2

看看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/

Answer 3

我看到一张包含10列和30行的表从顶部（优胜者支架）到底部（双重消除......）

使用此格式制作表格，但请确保使用以下方法重置页面的填充和边距：* {padding：0; margin：0 auto;}

下一步是将表放在div和ID'it #tableBody中，然后用Elem1等开始在你的桌子上工作......直到你达到30行和10列

Answer 4

我的版本。 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>

比赛括号仅使用HTML表格和CSS

4 个答案: