Я хочу поместить таблицу или границу для внутреннего содержимого в цикл foreach, и я не уверен, как это сделать.

Я пробовал ячейку и строку внутри Item.Description, и я знаю, что это не работает.

<div id="printContainer" class="col-md-12">
    <partial name="_CardDetails" model="@Model.Current" />
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <div class="verticalspace"></div>
    <table id="itemsTable" class="table table-bordered display responsive nowrap" style="width: 100%">
        <tbody>
            @foreach (var item in Model.ToView.Items ?? Enumerable.Empty<Item>())
            {
                <tr><td colspan="4"></td></tr>
                <tr style="background-color: #f9f9f9">
                    <td colspan="4"><b>@Item.Category.Name</b></td>
                </tr>
                <tr>
                    <td><b>@Html.Raw(Item.Responsibility)</b></td>
                    <td style="text-align: left">
                        <b>@Html.Raw(Item.Description)</b>

                        @foreach (var response in Model.Responses)
                        {
                            <br />
                            <br />

                            <b>@Html.Raw(response.DateCreated.ToString("MM/dd/yyyy")) 
                            @Html.Raw(response.Title)</b>
                            <br />
                            @Html.Raw(response.Response)
                        }
                    </td>
                    <td><b>@item.Status.Name</b></td>
                </tr>
            }
        </tbody>
    </table>
 </div>

Я ожидаю, что цикл foreach будет иметь собственную границу вокруг него.

0
bootsy

3 ответа

Добавить стиль CSS

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

</style>
<div id="printContainer" class="col-md-12">

            <partial name="_CardDetails" model="@Model.Current" />
            <div class="verticalspace"></div>
            <div class="verticalspace"></div>
            <div class="verticalspace"></div>
            <table id="itemsTable" class="table   table-bordered display 
              responsive nowrap" style="width: 100%">
                
                    @foreach (var item in Model.ToView.Items ?? 
              Enumerable.Empty<Item>())
                    {
                        <tr><td colspan="4"></td></tr>
                        <tr style="background-color: #f9f9f9"><td 
               colspan="4"><b>@Item.Category.Name</b></td></tr>
                        <tr>
                            <td><b>@Html.Raw(Item.Responsibility)</b> 
                            </td>
                            <td style="text-align: left">
                                <b>@Html.Raw(Item.Description)</b>

                                @foreach (var response in 
                       Model.Responses)
                                {
                                    <br />
                                    <br />

            <b>@Html.Raw(response.DateCreated.ToString("MM/dd/yyyy")) 
                @Html.Raw(response.Title)</b>
                                    <br />
                                    @Html.Raw(response.Response)
                                }
                            </td>
                            <td><b>@item.Status.Name</b></td>
                        </tr>
                    }
                  
              </table>
           </div>

Вы можете указать класс в css для каждого желаемого элемента, который вы хотите иметь рамку. Если вы хотите, чтобы каждая ячейка имела границу и была похожа на таблицу, вы можете ссылаться на элементы td внутри таблицы. Что-то вроде следующего:

table, th, td {
  border: 1px solid black;
}

Вы можете поиграть с кодом CSS, чтобы получить желаемый стиль.

Вы также можете применять его только к элементам tr, если вы хотите, чтобы это выглядело так, как вы хотите. Это просто вопрос разных вещей и применения инструкций границы к нужным элементам.

table, tr {
   border: 1px solid green;
}

Пожалуйста, проверьте этот код. Вы можете использовать свойства "border" в css для каждого столбца в теле.

table {
  width: 320px;
}

tr td {
  width: 50%;
}

thead td {
  background: #333;
}

tbody tr td {
  border-bottom: 1px solid #333;
}
<table>
  <thead>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tbody>
58507679