时间戳

首页 > 解决方案 > 尝试并未能使用 HTML 和 Bootstrap 并排呈现两个表格

html - 尝试并未能使用 HTML 和 Bootstrap 并排呈现两个表格

问题描述

我正在尝试并排呈现一些简单的 HTML/Bootstrap 表，但即使在尝试了从此处提供的先前解决方案之后，我也陷入了困境。我确信这很简单，但我是新手，所以任何帮助将不胜感激。

我的模型中有两个大小相同的列表，我想将它们并排显示。正在显示正确的数据，但我根本无法让它们一起呈现：

//布局

@using RazorLight

<html>
<head>
    <title>Daily Email</title>
    <link type="text/css" href="bootstrap.css" />
</head>
<body>
    <div id="body">
        @RenderBody()
    </div>
</body>
</html>

//每日报告电子邮件

@using Solution.Shared.Models
@inherits RazorLight.TemplatePage<Report>
@model Report
@{
    Layout = "_Layout.cshtml";
}

    <div>

    <p>
        <strong>
            This is an automated email.
            Do not reply to this email.
        </strong>
    </p>

    <p class="lead">
        The Data is sourced from Report.
    </p>

    <h1>Daily Totals: </h1>

    @{
        await IncludeAsync("Includes/DailyTotalsTable.cshtml", Model);
    }

</div>

//每日总表

@using Solution.Shared.Models
@inherits RazorLight.TemplatePage<Report>
@model Report

<div class="col-6">
<table class="table">
    <thead>
        <tr>
            <th>Category</th>
            <th>Previous</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var record in Model.PreviousTotals)
        {
            <tr>
                <td>@record.Category</td>
                <td>@record.Value</td>
            </tr>
        }
    </tbody>
</table>
</div>
<div class="col-6">
    <table class="table">
        <thead>
            <tr>
                <th>Current</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var record in Model.CurrentTotals)
            {
                <tr>
                    <td>@record.Value</td>
                </tr>
            }
        </tbody>
    </table>
</div>

标签： htmlcsstwitter-bootstrap.net-corebootstrap-4

解决方案

您还没有添加引导类row。用 class="row" 将代码包裹在 div 周围

<div class="row">
<div class="col-6">
<table class="table">
    <thead>
        <tr>
            <th>Category</th>
            <th>Previous</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var record in Model.PreviousTotals)
        {
            <tr>
                <td>@record.Category</td>
                <td>@record.Value</td>
            </tr>
        }
    </tbody>
</table>
</div>
<div class="col-6">
    <table class="table">
        <thead>
            <tr>
                <th>Current</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var record in Model.CurrentTotals)
            {
                <tr>
                    <td>@record.Value</td>
                </tr>
            }
        </tbody>
    </table>
</div>
</div>

推荐阅读