I am trying to create a table where the cells are populated with the expected data.

<table style="empty-cells: show;">
    <tr>
        <th>User</th>
        <th>Roles</th>
        <th>Permissions</th>
    </tr>
    @foreach (var userInfo in Model.UserAndRolesInfo)
    {
        <tr>
            <td>
                @userInfo.Username
            </td>

            @foreach (var role in userInfo.Roles)
            {
                @if (String.IsNullOrEmpty(@role))
                {
                    <td></td>
                }
                @if (!String.IsNullOrEmpty(@role))
                {
                    <td>
                        @role
                    </td>
                }

            }
            <td><button type="button" ><i ></i></button></td>
        </tr>
    }

</table>

Sometimes the rol will be empty in the foreach statement, if that is the case I want to leave that cell empty, but instead of that, it is moving the button to that cell.

This is how the table looks

Code inspection

CodePudding user response：

You can try to set fixed width to th and td:

<style>
    table th,td {
        width: 300px;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
    }
</style>

CodePudding user response：

1. Model.UserAndRolesInfo is a collection. That means it may contain n records.
2. Each Model.UserAndRolesInfo will have single record (userInfo): In the table, Each userInfo will represent a row.
3. userInfo.Roles is a collection. Each userInfo may have x number of roles. The problem lies here. Your table needs to have 3 td for each tr. 1 for User, 1 for Permissions and 1 for roles. If no of roles>1 then there will be 4 td for roles=2, 5 td for roles=3...
4. Your sample doesn't contain td for Permissions
5. @if (String.IsNullOrEmpty(@role)): try role instead of @role
6. @if (!String.IsNullOrEmpty(role)) would be unnecessary. try else block.