1

en un temas anterior trate sobre un caso similar, pero en este les presento la tabla que estoy diseñando:

table {
    width: 100%;
    overflow: auto;
    display: inline-block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card-header bg-primary text-center">
    <h5 style="color:white">Categoría</h5>
</div>
<table class="table table-active table-striped text-center"><!-- -->
    <thead class="thead-dark">
        <tr>
            <th >ID</th>
            <th>NOTAS</th>
            <th>RESUMEN</th>
            <th>CONTANDO<th>
            <th>OPCIONES</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>PRUEBA DE UNA NOTA</td>
            <td>PRUEBA DE UN RESUMEN</td>
            <td>
                    10000000;10000000;10000000;20000000;20000000;20000000;3000000;300000000	
            </td>
            <td>botones</td>
        </tr>
        <tr>
            <td>2</td>
            <td>PRUEBA DE UNA NOTA</td>
            <td>PRUEBA DE UN RESUMEN</td>
            <td>
                            10000000;10000000;10000000;20000000;20000000;20000000;3000000;3000000000
            </td>
            <td>botones</td>
        </tr>
        <tr>
            <td>3</td>
            <td>PRUEBA DE UNA NOTA</td>
            <td>PRUEBA DE UN RESUMEN</td>
            <td>
            10000000;10000000;10000000;20000000;20000000;20000000;3000000;300000000	
            </td>
            <td>botones</td>
        </tr>
    </tbody>
</table>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

Como pueden ver la columna "Contando" ocupa un gran tamaño en la tabla y quisiera su ayuda para arreglar el tamaño de esta, ya que no he encontrado una forma de solucionarlo mediante CSS o Bootstrap.

1
  • Cuando dices ayuda es qué, ¿agrandar el ancho de la columna o disminuirlo? Commented el 14 mar. 2019 a las 19:42

2 respuestas 2

2

Talvez esto te ayude; puedes incluir la propiedad table-layout: fixed a la tabla completa y la propiedad word-break: break-all a las columnas que quieras que se reduzcan

table {
  width: 100%;
  overflow: auto;
  display: inline-block;
  table-layout: fixed;
}

.cont {
  word-break: break-all;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="card-header bg-primary text-center">
  <h5 style="color:white">Categoría</h5>
</div>
<table class="table table-active table-striped text-center">
  <!-- -->
  <thead class="thead-dark">
    <tr>
      <th>ID</th>
      <th>NOTAS</th>
      <th>RESUMEN</th>
      <th>CONTANDO</th>
      <th>OPCIONES</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PRUEBA DE UNA NOTA</td>
      <td>PRUEBA DE UN RESUMEN</td>
      <td class="cont">
        10000000;10000000;10000000;20000000;20000000;20000000;3000000;3000000000
      </td>
      <td>botones</td>
      <tr>
        <td>2</td>
        <td>PRUEBA DE UNA NOTA</td>
        <td>PRUEBA DE UN RESUMEN</td>
        <td class="cont">
          10000000;10000000;10000000;20000000;20000000;20000000;3000000;3000000000
        </td>
        <td>botones</td>
      </tr>
      <tr>
        <td>3</td>
        <td>PRUEBA DE UNA NOTA</td>
        <td>PRUEBA DE UN RESUMEN</td>
        <td class="cont">
          10000000;10000000;10000000;20000000;20000000;20000000;3000000;3000000000
        </td>
        <td>botones</td>
      </tr>
  </tbody>
</table>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

2
  • 1
    Hola Ivan, gracias, le agregue las propiedades que me habías comentado y funciono, también elimine el display para que se ajustara mi tabla, gracias nuevamente
    – Reinos Ric
    Commented el 14 mar. 2019 a las 21:42
  • 1
    A la orden :) un gusto ayudar
    – IvanS95
    Commented el 14 mar. 2019 a las 21:42
0

Tienes una etiqueta mal cerrada en el thead

table {
    width: 100%;
    overflow: auto;
    display: inline-block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card-header bg-primary text-center">
    <h5 style="color:white">Categoría</h5>
</div>
<table class="table table-active table-striped text-center"><!-- -->
    <thead class="thead-dark">
        <tr>
            <th >ID</th>
            <th>NOTAS</th>
            <th>RESUMEN</th>
            <th>CONTANDO</th><!-- Aca estaba el error -->
            <th>OPCIONES</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>PRUEBA DE UNA NOTA</td>
            <td>PRUEBA DE UN RESUMEN</td>
            <td>10000000;10000000;10000000;20000000;20000000;20000000;3000000;300000000</td>
            <td>botones</td>
        </tr>
        <tr>
            <td>2</td>
            <td>PRUEBA DE UNA NOTA</td>
            <td>PRUEBA DE UN RESUMEN</td>
            <td>
                            10000000;10000000;10000000;20000000;20000000;20000000;3000000;3000000000
            </td>
            <td>botones</td>
        </tr>
        <tr>
            <td>3</td>
            <td>PRUEBA DE UNA NOTA</td>
            <td>PRUEBA DE UN RESUMEN</td>
            <td>
            10000000;10000000;10000000;20000000;20000000;20000000;3000000;300000000	
            </td>
            <td>botones</td>
        </tr>
    </tbody>
</table>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

4
  • Esto no soluciona el problema que describe en la pregunta
    – IvanS95
    Commented el 14 mar. 2019 a las 21:24
  • la pregunta no es muy concreta, y hay errores de sintaxis en las etiquetas, pense que eso lo que se necesitaba Commented el 14 mar. 2019 a las 21:27
  • Hola, muchas gracias con el th, no lo había visto, gracias y ya me ayudaron a resolver el problema, gracias.
    – Reinos Ric
    Commented el 14 mar. 2019 a las 21:40
  • No hay problema @ReinosRic Commented el 14 mar. 2019 a las 21:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.