¿Cómo configurar el ancho fijo para <td>?

514

Esquema simple:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Necesito configurar un ancho fijo para <td>. He intentado:

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

también

td.something {
  width: 90px;
}

para

<td class="something">B</td>

E incluso

<td style="width: 90px;">B</td>

Pero el ancho de <td>sigue siendo el mismo.

usuario984621
fuente
1
Acabo de intentarlo y funciona, tal vez el problema es diferente. ¿Qué te dice Firebug sobre el elemento?
Rockbot
En este sitio , el hombre habla sobre este tema con video. Está muy claro.
egemen
use style="width: 1% !important;"para hacer que el ancho sea tan estrecho como la palabra más larga en la columna, es útil para la primera columna ID / #. Probado en Chrome (escritorio y móvil), opera (escritorio), IE (escritorio), edge (escritorio), firefox (escritorio)
vinsa

Respuestas:

1085

Para Bootstrap 4.0:

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

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

Para Bootstrap 3.0:

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

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Para Bootstrap 2.0:

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

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** Si tiene <th>elementos, establezca el ancho allí y no en los <td>elementos.

Paulo
fuente
79
¿Qué sucede si tienes más de 12 columnas?
ClearCloud8
33
puede aplicar esto solo en el <head> en cada etiqueta <th> y todas las filas coincidirán
Diego Fernando Murillo Valenci
77
¿Hay documentación sobre esto en el sitio web de Bootstrap?
Luis Perez
26
Esto funciona, pero no está en el sitio de arranque porque esas clases col- * no están destinadas a usarse de esta manera. Están destinados a ser utilizados en las cuadrículas de arranque receptivas. Si le gusta lo que hacen, considere mirar el CSS para ellos y cópielo para hacer su propio CSS.
DustinA
1
Además, en lugar de establecer la clase para la fila de alcance, simplemente podemos establecerla una vez para el encabezado <th> y el resto se ocupa automáticamente.
dopplesoldner
133

Estaba teniendo el mismo problema, arreglé la tabla y luego especifiqué mi ancho td. Si tienes esto, puedes hacerlo también.

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

Modelo:

<td style="width:10%">content</td>

Utilice CSS para estructurar cualquier diseño.

DDDD
fuente
Esto es genial, pero como complemento, use un classen la tdetiqueta en lugar de aplicar el estilo directamente
Ramses
1
Esto funciona mejor gracias lo suficiente como para aumentar el ancho de me thgusta: <th style="width: 25%;"></th>esto afectará el ancho de otras columnas
shaijut
¡Gracias! He configurado la clase col-md-x para Bootstrap 3 pero no funcionó. Establecer el diseño de la tabla en "fijo" resuelve mi problema.
maurisrx
Esto funciona. La clave es el table-layout: fixed. Eso es necesario porque muchas plantillas creadas con BS4 aplican flexibilidad a todo, incluidas las tablas.
Ivan
73

En lugar de aplicar las col-md-*clases a cada una tdde las filas, puede crear colgroupay aplicar las clases a la coletiqueta.

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Demo aquí

tormenta
fuente
1
Prefiero esto, pero parece no afectar a mi caso, el ancho de la columna no se extiende por col-md- *
Osify
Me gusta esta solución, por cierto, ¿por qué uno se ve obligado a usar clases col-md- * y no col-lg- *, col-sm- * o col-xs- *?
LucioB
1
@LucioB puede usar lo que quiera e incluso usar varios de ellos por columna (el ejemplo <col class="col-md-4 col-sm-6">tendrá un ancho de 33% en tamaño de pantalla mediano y 50% en tamaño de pantalla pequeña)
VDarricau
1
Colgroup no funciona en Chrome. (Bootstrap v4.1). Para uniformidad entre navegadores, use% width para elementos <td>.
AnkitK
57

Esperemos que este ayude a alguien:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

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

OhadR
fuente
1
La respuesta más fácil de usar
GavinBelson
54

Si está utilizando <table class="table">su tabla, la clase de tabla de Bootstrap agrega un ancho del 100% a la tabla. Necesita 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.

meobyte
fuente
1
Como complemento de Bootstrap 3, también necesitará establecer la propiedad de espacio en blanco de la thnormal, ya que actualmente es una envoltura ya que dichos encabezados no se romperán.
Sammaye
41

En mi caso pude solucionar ese problema usando en min-width: 100pxlugar de width: 100pxpara las celdas tho td.

.table td, .table th {
    min-width: 100px;
}
ThiagoPXP
fuente
13
Esto puede haber conservado lo que queda de mi cordura.
Joel
¡Si! esto establece, bueno, el ancho mínimo para una columna en una tabla receptiva. Gracias.
O. Jones
1
esto funcionó mejor que la pregunta contestada, gracias!
Israel
38

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

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...
CHAN
fuente
55
Esto se ajusta a mi caso de uso. ¡Gracias!
tonny
16
Es importante tener en cuenta que las únicas opciones w- * son: .w-25, .w-50, .w-75, .w-100, .w-autopor lo tanto, si desea algo más, por ejemplo, w-10deberá agregar .w-10 { width: 10% !important; }a su archivo css localizado.
Abela
10

Prueba esto -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>
Rohit Suthar
fuente
3
Este es el único que funciona con todas las otras respuestas.
0bserver07
También agregué text-overflow: ellipsispara asegurarme de que el texto de corte es aparente
weeksdev
@ Observer07 De hecho
TheRandomGuy
9

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 los sufijos xs, md, para permitir que Bootstrap lo derive automáticamente de la ventana gráfica.

Entonces se verá a continuación:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

¡Espero que esto sea útil para alguien más por ahí!

¡Salud!

Randika Vishman
fuente
7

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

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Resultado: -

ingrese la descripción de la imagen aquí

Hitesh Sahu
fuente
3

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

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

Cualquier otra cosa no me funciona.

usuario984621
fuente
2

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

¿Has probado selectores 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 CSS de arranque.

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

David Heijl
fuente
2

He estado luchando con el problema por un tiempo, así que en caso de que alguien cometa el mismo error estúpido que yo ... En el interior <td>tuve el elemento con white-space:preestilo aplicado. Eso hizo que todos mis trucos de mesa / tr / td fueran descartados. Cuando eliminé ese estilo, de repente todo mi texto estaba bien formateado dentro del td.

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

Mikk
fuente
1

Use d-flex en lugar de fila para "tr" en Bootstrap 4

La cuestión es que la clase "fila" ocupa más ancho que el contenedor principal, lo que presenta problemas.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

Usman Anwar
fuente
Quise decir "fila" en lugar de "tr". A medida que la clase de fila viene con canales en ambos extremos. O si desea utilizar la clase "fila" simplemente agregue la clase "sin canalones".
Usman Anwar
1

En bootstarp 4 puedes usar rowy col-*en la tabla, lo uso de la siguiente manera

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>
Liam
fuente
1

Así es como lo hago a menudo cuando no tengo que lidiar con IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

De esa manera puede tener una cuadrícula familiar de 12 col.

vothaison
fuente
0

Nada de esto funciona para mí, y tengo muchos cols en la tabla de datos para hacer que la clase% o sm sea igual a un diseño de 12 elementos en bootstrap.

Estaba trabajando con tablas de datos Angular 5 y Bootstrap 4, y tengo muchos cols en la tabla. La solución para mí fue THagregar un DIVelemento con un ancho específico. Por ejemplo, para los cols "Nombre de la persona" y "Fecha del evento", necesito un ancho específico, luego coloque un divencabezado col, el ancho completo del col se redimensiona al ancho especificado desde el div en TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...
Axel Osorio
fuente
-1

use algo sin td o th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

geco
fuente
-2

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>

usuario10861319
fuente
Agregue alguna explicación también.
Akash Dubey
Esta respuesta es confusa en el mejor de los casos. Las clases son identificaciones extrañas, no esenciales, sin explicación.
GotBatteries