对不起,我发了两个帖子(2小时前),但仍然无法正常工作。
我正在使用Bootstrap 4中的表格创建锦标赛生成器。最后一部分是我给游戏编号。
最上面的部分是当前的情况。我想从底部开始,前面有一个数字。 Click for image
这是我的代码:
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">Quarter-finals</th>
<th colspan="2">Semi-finals</th>
<th colspan="2">Final</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"><?php echo '<b>' . $player_1 . '</b><hr><b>' . $player_2 . '</b>' ;?></td>
<td colspan="2" class="vs-text">Winners game 1 & 2</td>
<td colspan="2" class="vs-text">Winners game 5 & 6</td>
</tr>
<tr>
<td colspan="2"><?php echo '<b>' . $player_3 . '</b><hr><b>' . $player_4 . '</b>' ;?></td>
<td colspan="2" class="vs-text">Winners game 3 & 4</td>
</tr>
<tr>
<td colspan="2"><?php echo '<b>' . $player_5 . '</b><hr><b>' . $player_6 . '</b>' ;?></td>
</tr>
<tr>
<td colspan="2"><?php echo '<b>' . $player_7 . '</b><hr><b>' . $player_8 . '</b>' ;?></td>
</tr>
</tbody>
</table>
这是CSS:
td, th {border: 1px solid black !important;}
hr {margin-top: 2px !important; margin-bottom: 2px !important;}
.vs-text{text-align: center; line-height: 45px; opacity:0.2;}
td{ padding: 1em; border: 1px solid; text-align: center;}
这是表格现在的样子:
所以,我想要的是每一个游戏前面的不同小单元中都有一个小数字。有人解决吗?
答案 0 :(得分:1)
您可以添加另一个td
并使用百分比widths
定义响应表的宽度。
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr td:first-child {
width: 20%;
text-align: center;
}
tr td:last-child {
width: 80%;
}
hr {
background-color: #c7c7c7;
height: 1px;
border: 0;
width: 100%;
}
<table>
<tr>
<td>1</td>
<td>2<hr> 3</td>
</tr>
</table>
答案 1 :(得分:0)
一个更简单的解决方案是使用colspan / rowspan属性:如果您想使用建议的printscreen,请尝试以下操作:
td {
padding: 1em;
border: 1px solid;
text-align: center;
}
<table>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Speler 13</td>
</tr>
<tr>
<td>Speler 14</td>
</tr>
</tbody>
</table>