How do I setup columns in a < td > element within an HTML < table >?

Question

The following output:

Is delivered by the following code:

<table class="table container">
  <tr>
    <th class="col-md-1 text-center">
      @Html.DisplayNameFor(Function(model) model.SurveyResults.FirstOrDefault().QuestionNum)
    </th>
    <th class="col-md-2 text-center">
      @Html.DisplayNameFor(Function(model) model.SurveyResults.FirstOrDefault().QuestionText)
    </th>
    .
    .
    .
    <th class="col-md-2">
      @Html.DisplayNameFor(Function(model) model.SurveyResults.FirstOrDefault().Answers)
    </th>
  </tr>

  @For Each item In Model.SurveyResults
    @<tr>
      <td class="col-md-1 text-center">
        @Html.DisplayFor(Function(modelItem) item.QuestionNum)
      </td>
      <td class="col-md-2">
        @Html.DisplayFor(Function(modelItem) item.QuestionText)
      </td>
    .
    .
    .
      <td class="col-md-2">
        @For Each ans In item.Answers
          @ans.AnswerText
          @ans.AnswerStats
          @<br />
        Next
      </td>
    </tr>
  Next
</table>

In the Answers column the string in the parenthesis are the stats regarding the answer. I would like the stats to show up as another column to the right of the Answers. The answers will ultimately be of varying lengths, and the stats need to show up to the right lined up vertically. The code above will always show the stats at the end of the answer text, where ever that occurs.

I tried several ideas from SO and other forums, but couldn't figure out how to easily create 2 'sub-columns' within the Answers < td > element of each < tr > row. I want to stick with Razor/HTML code.

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

You must add another table within the answers td element.

This is very similar i think: Html table tr inside td

edited May 23 '17 at 12:22

Community

1
1

answered Sep 20 '15 at 21:57

Hieu Le

738
4
8

I don't know why someone voted you down b/c your answer was a good one, especially b/c you added a great link (So I clicked you up to get you back to 'even'). I had previously tried to add a table inside, but failed to achieve my objective. But your link (which I had not seen before) was very good. There were many options there and one of them pointed me in the right direction. I had to do a little more research to get rid of the secondary table's borders, but it turned out not too difficult. I will post my solution and results below. Big tnx! – Alan Sep 21 '15 at 16:39

score 1 · Answer 2 · answered Sep 21 '15 at 16:51

The code used to achieve my objective is shown below, however, the solution is thanks to and attributed to Hieu Le's post above.

I'm just showing the section of code where the sub-table is placed, which is the last < td > section in the Razor code shown in the original post.

<td>
  <table>
    @For Each ans In item.Answers
      @<tr>
         <td class="col-md-2" style="border-top: none; padding: 0">@ans.AnswerText</td>
         <td class="col-md-1" style="border-top: none; padding: 0">@ans.AnswerStats</td>
      </tr>
    Next
  </table>
</td>

The Razor code above yielded the following presentation. I made other changes to the page, and the page is not yet done so ignore the sloppy presentation of field names instead of display names. But the place to observe is just in the Answers column. You can see that the two fields previously separated by only a space are now presented in separate columns. The additional style elements are simply to eliminate extra border lines which would detract from the overall presentation.

How do I setup columns in a < td > element within an HTML < table >?

2 Answers2