Questions to resize with ASP.Net application

Navigation
0

I'm developing a web report (ASP.NET + BOOTSTRAP) and opening it on my mobile phone looks like this:

Wouldyouliketoresizetheselinestotheendortakeoutthesidelines,wouldthatbepossible?

Thecodelookslikethis:

@modelPagedList.IPagedList<RelatorioWEB.Models.VWRelVendasAnual>@{ViewBag.Title="Resumo de Vendas (Anual)";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel panel-default">
    <div class="panel-heading"><h4><b>Resumo de Vendas (Anual)</b></h4></div>
    <div class="panel-body">
        @*<div class="row">*@
        <div class="col-md-12">
            <table class="table">
                <tr>
                    <th>Ano </th>
                    <th>Liquido </th>
                    <th>Custo </th>
                    <th>Desc. </th>
                    <th>Bruto </th>
                    <th>Lucro </th>
                    <th>Dinheiro </th>
                    <th>Cartao </th>
                    <th>Cheque </th>
                    <th>Crédito </th>
                    <th>Crediario </th>
                    <th>Ticket Med.</th>
                </tr>

                @foreach (var item in Model)
                {
                    <tr>
                        <td>@Html.DisplayFor(modelItem => item.Ano)</td>
                        <td>@Html.DisplayFor(modelItem => item.Valor_Liquido)</td>
                        <td>@Html.DisplayFor(modelItem => item.Custo)</td>
                        <td>@Html.DisplayFor(modelItem => item.Desconto)</td>
                        <td>@Html.DisplayFor(modelItem => item.Valor_Bruto)</td>
                        <td>@Html.DisplayFor(modelItem => item.Lucro)</td>
                        <td>@Html.DisplayFor(modelItem => item.Dinheiro)</td>
                        <td>@Html.DisplayFor(modelItem => item.Cartao)</td>
                        <td>@Html.DisplayFor(modelItem => item.Cheque)</td>
                        <td>@Html.DisplayFor(modelItem => item.Crédito)</td>
                        <td>@Html.DisplayFor(modelItem => item.Crediario)</td>
                        <td>@Html.DisplayFor(modelItem => item.Ticket)</td>

                    </tr>
                }
                <tr>
                    <td><b>@Model.Count registos de @Model.TotalItemCount</b></td>
                    <td><a href="/Relatorios/RelVendasAnual?gerarPDF=true"><b>GERAR PDF</b></a></td>
                </tr>
            </table>
            @*</div>*@
        </div>
        @{
            if (Model.TotalItemCount != Model.Count)
            {
                <div class="row">
                    <div class="col-md-12">
                        Página @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount

                        @if (Model.HasPreviousPage)
                        {
                            @Html.ActionLink("<<", "RelVendasAnual", new { pagina = 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                            @Html.Raw(" ");
                            @Html.ActionLink("< Anterior", "RelVendasAnual", new { pagina = Model.PageNumber - 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                        }
                        else
                        {
                            @:<<
                            @Html.Raw(" ");
                            @:< Anterior
                        }

                        @if (Model.HasNextPage)
                        {
                            @Html.ActionLink("Próxima >", "RelVendasAnual", new { pagina = Model.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                            @Html.Raw(" ");
                            @Html.ActionLink(">>", "RelVendasAnual", new { pagina = Model.PageCount, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
                        }
                        else
                        {
                            @:Próxima >
                            @Html.Raw(" ")
                            @:>>
                        }
                    </div>
                </div>
            }
        }
    </div>
</div>
    
asked by anonymous 13.08.2018 / 21:30

1 answer

1

Use table-responsive

  

Responsive tables allow tables to be rolled   horizontally with ease. Make any table responsive in   all viewports involving a with .table .table-responsive . Or,   choose a maximum breakpoint with which you want to use a   responsive table .table-responsive{-sm|-md|-lg|-xl} .   Source: Bootstrap 

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
    
13.08.2018 / 23:18
Implementation of Angled list with problem Javascript - Configuration of url's according to environment