将 TD 拆分为不同的部分答案

【问题标题】：Split TD in different sections将 TD 拆分为不同的部分
【发布时间】：2019-08-02 18:22:05
【问题描述】：

很抱歉重复发帖（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

所以，我想要的是在每场比赛前的不同小格中都有一个小数字。有人解决吗？

【问题讨论】：

标签： css html-table bootstrap-4

【解决方案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

【讨论】：

但是它不起作用。我添加了更多信息。编辑：如您所见，第二个 TD 不是最后一个孩子。

【解决方案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>

【讨论】：