css - 在不同的部分拆分 TD

Question

抱歉，双重发帖(2 小时前)，但它仍然无法正常工作。

我正在使用 Bootstrap 4 中的表格来创建锦标赛生成器。最后一部分是我给游戏数字。

上面的部分是现在的情况。我想要底部的情况，前面有 1 个数字。 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