Изменить ширину стола bootstrap 4 - PullRequest
Новая
       57

Изменить ширину стола bootstrap 4

1 голос
/ 23 апреля 2020

Мне нужно изменить ширину таблицы в bootstrap 4, как видно на изображении таблица не использует всю ширину страницы, это код в HTML. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="tabla">
  <div class="row">
    <div class="col-sm-12">
      <div class="table-responsive">
        <table id="tabla_factura" class="table table-hover table-condensed table-bordered  table-stripedcol text-center ">
          <tr>
            <th>No.</th>
            <th>Vendedor</th>
            <th>Reputacion</th>
            <th>Titulo</th>
            <th>Precio</th>
            <th>Vendidos</th>
            <th>Tipo de publicación</th>
            <th>Direccion</th>
            <th>Envio Gratis</th>
            <th>Publicacion</th>
          </tr>
          <tr>
            <td> </td>
            <td></td>
            <td> </td>
            <td></td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 23 апреля 2020

Вы можете просто добавить width в таблицу, а для центра вы можете использовать mx-auto class. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .table {
      width: 75%;
  }
</style>

<div id="tabla">
  <div class="row">
    <div class="col-sm-12">
      <div class="table-responsive">
        <table id="tabla_factura" class="table table-hover table-condensed table-bordered  table-stripedcol text-center mx-auto">
          <tr>
            <th>No.</th>
            <th>Vendedor</th>
            <th>Reputacion</th>
            <th>Titulo</th>
            <th>Precio</th>
            <th>Vendidos</th>
            <th>Tipo de publicación</th>
            <th>Direccion</th>
            <th>Envio Gratis</th>
            <th>Publicacion</th>
          </tr>
          <tr>
            <td> </td>
            <td></td>
            <td> </td>
            <td></td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
...