改变表格宽度bootstrap 4

Question

我需要在bootstrap 4中改变表格的宽度，如以下所示 形象 表格没有使用页面的所有宽度，这是HTML的代码，我想在bootstrap 4中改变表格的宽度，如图所示。

<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>

Answer 1

你可以简单的添加 width 在桌子上，而对于中心，你可以使用。mx-auto 类。

<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>