Splitting single colum into three column in mvc asp.net (in view)

Question

Hi all my view has the bellow code

    @foreach (var group in Model.FieldGroup)
                    {

                        <table class="collapsableTable" style="margin-left: 3%;">
                            <tr class="collapsibleTitle">
                                <td width="6%" valign="top">
                                    <span class="accordionIconOff"></span>
                                </td>
                                <td width="94%" valign="top">@group.GroupName</td>
                            </tr>
                            <tr class="collapsibleContent">
                                <td colspan="2">
                                    <table>
                                        @foreach (var field in group.Fields)
                                        {
                                            <tr>
                                                <td>
                                                    @Html.CheckBox(field.FieldName)
                                                    @Html.LabelFor(model => field.FieldName, field.FieldName)
                                                </td>
                                            </tr>
                                        }
                                    </table>
                                </td>
                            </tr>
                        </table>

my model is like

public class FieldGroup
{
    public string GroupName { get; set; }

    public List<FieldModel> Fields { get; set; }
}

and the field has

 public class FieldModel
 {
    public int FieldId { get; set; }

    public string FieldName { get; set; }
 }

and in the view it generate a filed list with checkbox as a single column but i have to have 10 field group in a column and next 10 to next column and so on .. so my view seem to be like 3 column lay out ???

can any one help me out soon!!

im getting something like this

but i want my view to be like this

Answer 1

Hope this will help

.col1
{
    width: 33.3%;
    min-width: 200px;
    float: left;
}

.col2
{
    width: 33.3%;
    min-width: 200px;
    float: left;
}

.col3
{
    width: 33.3%;
    min-width: 200px;
    float: left;
}

Answer 2

It sounds like you're using a table for layout, rather than for tabular data, which is generally considered to be a no-no.

I would suggest altering your inner loop from:

<table>
    @foreach (var field in group.Fields)
    {
        <tr>
            <td>
                @Html.CheckBox(field.FieldName)
                @Html.LabelFor(model => field.FieldName, field.FieldName)
            </td>
        </tr>
    }
</table>

to

<div class="field-container">
    @foreach (var field in group.Fields)
    {
        <div class="field">
            @Html.CheckBox(field.FieldName)
            @Html.LabelFor(model => field.FieldName, field.FieldName)
        </div>
    }
</div>

and then using CSS to arrange the checkboxes:

.field-container {
    width: 600px;
}

.field-container .field {
    width: 200px;
    float: left;
    margin: 5px 0;
}