Bootstrap: cómo configurar el ancho fijo para ?

Esquema simple:

 A B C D  

Necesito configurar un ancho fijo para

. He intentado:

 tr.something { td { width: 90px; } } 

también

 td.something { width: 90px; } 

para

 B 

E incluso

 B 

Pero el ancho de

sigue siendo el mismo.

Para Bootstrap 4.0:

En Bootstrap 4.0.0 no puedes usar las clases col-* manera confiable (funciona en Firefox, pero no en Chrome). Necesitas usar la respuesta de OhadR :

  Col 1 Col 2 Col 4 Col 5  

Para Bootstrap 3.0:

Con twitter bootstrap 3 use: class="col-md-*" donde * es un número de columnas de ancho.

  A B C D  

Para Bootstrap 2.0:

Con twitter bootstrap 2 use: class="span*" donde * es un número de columnas de ancho.

  A B C D  

** Si tiene

elementos, establezca el ancho allí y no en los elementos

.

Estaba teniendo el mismo problema, hice la tabla fija y luego especifiqué el ancho de mi td. Si lo tienes, puedes hacer eso también.

 table { table-layout: fixed; word-wrap: break-word; } 

Modelo:

 content 

Utilice CSS para estructurar cualquier diseño.

En lugar de aplicar las clases col-md-* a cada td en la fila, puede crear un colgroup y aplicar las clases a la etiqueta col .

  
Title Long Value

Demo aquí

Si está utilizando

en su tabla, la clase de tabla de Bootstrap agrega un ancho del 100% a la tabla. Debes cambiar el ancho a automático.

Además, si la primera fila de la tabla es una fila de encabezado, es posible que deba agregar el ancho a th en lugar de td.

En mi caso, pude solucionar ese problema usando min-width: 100px lugar de width: 100px para las celdas th o td .

 .table td, .table th { min-width: 100px; } 

Esperemos que este ayude a alguien:

 
Col 1 Col 2 Col 3 Col 4 Col 5
Val 1 Val 2 Val 3 Val 4 Val 5

https://github.com/twbs/bootstrap/issues/863

Prueba esto –

  

Para Bootstrap 4, simplemente puede usar el ayudante de clase:

  ...
Col 1 Col 2 Col 3 Col 4

Esta solución combinada funcionó para mí, quería columnas de ancho igual

  

Resultado: –

enter image description here

Ok, acabo de descubrir dónde estaba el problema: en Bootstrap está configurado como un width valor predeterminado para el elemento select , por lo tanto, la solución es:

 tr. something { td { select { width: 90px; } } } 

Cualquier otra cosa no me funciona.

Difícil de juzgar sin el contexto de la página html o el rest de su CSS. Puede haber un trillón de razones por las cuales su regla CSS no está afectando al elemento td.

¿Has probado selectores de CSS más específicos como

 tr.somethingontrlevel td.something { width: 90px; } 

Esto para evitar que su CSS sea anulado por una regla más específica del bootstrap css.

(por cierto, en su muestra de CSS en línea con el atributo de estilo, usted anotó mal el ancho, ¡eso podría explicar por qué esa prueba falló!)

He estado luchando con el problema por un tiempo, así que en caso de que alguien cometa el mismo error estúpido que yo … Dentro del

tuve el elemento con white-space:pre estilo aplicado. Eso hizo que todos mis trucos table / tr / td descartados. Cuando eliminé ese estilo, de repente todo mi texto estaba muy formateado dentro del td .

Por lo tanto, siempre verifique el contenedor principal (como table o td ) pero también, siempre verifique si no cancela su hermoso código en algún lugar más profundo 🙂

Bootstrap 4.0

En Bootstrap 4.0, tenemos que declarar las filas de la tabla como cuadros flexibles agregando la clase d-flex, y también soltar xs, md, sufijos para permitir que Bootstrap lo obtenga automáticamente de la ventana gráfica.

Por lo tanto, se verá a continuación:

 
Student No. Description Amount
test Name here Amount Here

Espero que esto sea útil para alguien más allá.

¡Aclamaciones!

usar .algo sin td o th

    Bootstrap Example     

Fixed width column

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Nada de esto funciona para mí, y tengo muchos cols en datatable para hacer que la clase% o sm sea igual a la disposición de 12 elementos en bootstrap.

Estaba trabajando con las tablas de datos Angular 5 y Bootstrap 4, y tengo muchos cols en la tabla. La solución para mí fue en el TH para agregar un elemento DIV con un ancho específico. Por ejemplo, para los cols “Nombre de persona” y “Fecha del evento” necesito un ancho específico, luego coloco un div en el encabezado col, todo el ancho del collo luego cambia su tamaño al ancho especificado de div en el TH :

  ...
ID Value
Person Name
Event date