Why is only the table compressed on the page?

A

Andrey2019-11-13 14:17:09

Bootstrap

Andrey, 2019-11-13 14:17:09

Good afternoon! Can you please tell me why only the table is compressed when displaying the view and how to avoid it?
I have already tried several options for placing a table in a container, etc., but there are no changes :( I am
developing a site on ASP .NET Core 2.1 MVC.
I use the following page template _Layout.cshtml:

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-2 col1">
                Шапка. Колонка 1
            </div>
            <div class="col-sm-10 col2">
                Шапка. Колонка 2
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2 col3">
                <ul class="nav nav-pills nav-stacked">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                    <li><a asp-area="" asp-controller="Admin" asp-action="Index">Пользователи</a></li>
                </ul>
            </div>
            <div class="col-sm-10 col4">
                <partial name="_CookieConsentPartial" />
 
                @RenderBody()
                <hr />
                <footer>
                    <p>&copy; 2019 - Test_project_bootstrap4</p>
                </footer>
            </div>
        </div>
    </div>
...
...
</body>

Here is the view:
Index.cshtml

@{
    ViewData["Title"] = "Index";
    //Layout = "~/Views/Shared/_Layout.cshtml";
}
@model IEnumerable<User>
@{int nomer = 0;}
<h3>Пользователи</h3>
<hr />
<a class="btn btn-primary btn-xs" role="button" asp-action="Add" asp-controller="User" asp-route-id="">Добавить пользователя</a>
<hr />
<table class="tabe table-striped table-bordered">
    <thead>
        <tr>
            <th> # </th>
            <th> ID </th>
            <th> Логин </th>
            <th> Имя </th>
            <th> Роль </th>
            <th> Правка </th>
            <th> Удалить </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var usr in Model)
        {
            nomer++;
            <tr>
                <th scope="row">@nomer</th>
                <td> @usr.Id </td>
                <td> @usr.Email </td>
                <td>@usr.Name</td>
                <td>@usr.Role</td>
                <td><a class="btn btn-default btn-xs" role="button" asp-action="Edit" asp-controller="User" asp-route-id="@usr.Id">Изменить</a></td>
                <td><a class="btn btn-danger btn-xs" role="button" asp-action="Delete" asp-controller="User" asp-route-id="@usr.Id">Удалить</a></td>
            </tr>
        }
    </tbody>
</table>

And this is what it looks like :(

Thanks!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Artem Ivanov, 2019-11-13
@ns174ru

add class w-100 for the table