Question

对不起，我发了两个帖子（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;}

这是表格现在的样子：

Link to my table

所以，我想要的是每一个游戏前面的不同小单元中都有一个小数字。有人解决吗？

Answer 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>

JSFiddle Demo

Answer 2

一个更简单的解决方案是使用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>

将TD分成不同的部分

2 个答案: