0

Tengo una tabla de la siguiente manera, donde se muestra los datos de la base de datos

introducir la descripción de la imagen aquí

Lo que quiero lograr es que la columna Asignado a sea de menor tamaño, es la única columna que tiene más dato, he intentado que quede de la siguiente manera. No eh podido lograrlo. Estoy usando las clases table-bordered table-hover table-condensed

introducir la descripción de la imagen aquí

Tengo el siguiente Código de la tabla

<div class="table-responsive">
    <table style="width: 100%" id="table_principal" class="table table-bordered table-hover table-condensed" >
      <thead>
        <tr>
          <th> 
            Folio
          </th>
          <!-- <th >
            Contacto
          </th> -->
          <th >
            Nro Serie
          </th>
          <th >
            Marca
          </th>
          <th >
            Tipo
          </th>
          <th >
            Asignado a
          </th>
          <th >
            Solicitado
          </th>
          <th >
            Acciones
          </th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
4
  • Puedes intentar agregar una clase a tus <td> con la propiedad white-space: nowrap; o añadirlo directamente a la etiqueta. Céntanos cómo te va con eso. developer.mozilla.org/es/docs/Web/CSS/white-space Commented el 2 jul. 2019 a las 20:41
  • ¿La tabla toma todo el espacio del contenedor padre, o tiene un scroll horizontal? Porque si es lo primero, lo que podrías hacer es distribuir el 100% de ancho del contenedor de forma manual entre tus columnas (tanto de cabecera como de cuerpo) con el selector :nth-child(n), donde n es el número de la columna seleccionada, de izquierda a derecha. Commented el 3 jul. 2019 a las 1:14
  • Tiene un scroll horizontal Commented el 4 jul. 2019 a las 16:11
  • Lo que hice fue utilizar max-width; 50px, pero ahora le letras están sobre encimadas, traté de poner white-space: nowrap pero no funciona Commented el 4 jul. 2019 a las 17:52

1 respuesta 1

0

Buenas puedes utilizar la siguiente regla css en el td:

.celdaAsignado{
word-break: break-all !important;
white-space: nowrap !important;
width : 150px !important;
}

y la adjuntas de esta forma:

<td class="celdaAsignado">
Contenido
</td>

Saludos

1
  • Por favor evita usar la regla !important , se considera una mala práctica su uso excesivo Commented el 2 jul. 2019 a las 21:14

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.