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>标记以获取行foreach列表

或

如果您需要列中的垂直行，请尝试此操作！

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

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

Answer 2

如果你需要垂直构建你的桌子，你必须把你的foreach循环放在＆lt; tr> ＆LT; / tr＆gt;元素

HTML表会自动开始将行拆分为新列

2 个答案: