HTML Table 自动开始将行拆分为新的列

Question

我的问题是 HTML 表格不是垂直显示行，而是在一些行之后开始自动将它们放入新列中，顺序如下:

|Row1 | Row3 | Row4 |
|Row2 |

但我只需要它在一列中垂直移动:

|Row1|
|Row2|
|Row3|...

在我的表格的 HTML 代码下方以及我如何加载数据:

<table id="coinflip-table">
    <tbody id="coinflip-list">
    <tr>
    @if (ViewBag.CoinflipAll != null)
    {
        foreach (CoinFlip.Main.Models.CoinflipViewModel cfGames in Model.Coinflips)
        {
            <td>
            <img class="coinflip-list-avatar" src="@cfGames.User1_IconUrl" />
            @if (cfGames.Status != 0)
            {
                <span class="coinflip-vs-player">VS</span>
                <img class="coinflip-list-avatar" src="@cfGames.User2_IconUrl" />
            }
            </td>
            <td class="coinflip-list-skins">
            @if (ViewBag.WeaponBet != null)
            {
                foreach (CoinFlip.Main.Models.WeaponWebViewModel wep in ViewBag.WeaponBet)
                {
                    <img class="coinflip-list-skins-small" title="@wep.Name" src="@wep.ImageUrl">
                }
            }
            </td>
            <td>
            <span class="coinflip-value">$@cfGames.TotalValue</span>
            </td>
            <td></td>
            <td>
            <button class="coinflip-list-action" type="button" data-toggle="modal">WATCH</button>
            </td>
     }
            }
        </tr>
    </tbody>
</table>

而且我似乎无法理解它的原因。有没有办法解决这个问题，只是垂直移动？在 JS、CSS 或 HTML 中？或者这个问题可能与其他地方有关？

感谢任何帮助，

干杯

Answer 1

您需要包括 <tr>循环标记以获取每个列表的行

或

如果你需要在一列中垂直行试试这个!

<!-- Row -->
<tr>
  <!-- Column -->
  <td>
    <!-- Row Within Column -->
    <tr>
       <td></td>
    </tr>
  </td>
</tr>

如果您有任何问题，请在下面发表评论？