Questions to resize with ASP.Net application

Question

I am developing a web report (ASP.NET + BOOTSTRAP) and when opening it on mobile phone it is as follows:

I’d like to resize those lines to the end or else take out the side lines, would that be possible?

The code is as follows:

@model PagedList.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>

Answer 1

Use table-responsive

Responsive tables allow tables to be rolled horizontally with ease. Make any table responsive in all viewports involving a .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>