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


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.


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.



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í


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


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.


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

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

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>

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!


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í


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.


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


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


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>


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>

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.


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

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


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


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.