Tamaño de la columna de la tabla


103

En Bootstrap 3, podría aplicar col-sm-xxa las thetiquetas en las theadcolumnas de la tabla y cambiar el tamaño a voluntad. Sin embargo, esto no funciona en bootstrap 4. ¿Cómo puedo lograr algo como esto en bootstrap 4?

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

Mirando el código provisto que no tiene el tamaño adecuado, especialmente si agrega algunos datos a la tabla. Mira cómo funciona esto:

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

1
como un apéndice a esta pregunta: si tiene contenido extenso (como URL muy largas) para mostrar las tablas de bootstrap 4, no es una gran solución incluso con la respuesta de tamaño a continuación. ya sea usando un flex-hilera o fila / Col solución tiende a funcionar mejor con rebosadero y ajuste del texto
Killerpixler

Respuestas:


162

Actualizado 2018

Asegúrese de que su mesa incluya la tableclase. Esto se debe a que las tablas de Bootstrap 4 son "opcionales", por lo que la tableclase debe agregarse intencionalmente a la tabla.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x también tenía algo de CSS para restablecer las celdas de la tabla para que no floten.

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

No sé por qué no es Bootstrap 4 alpha, pero es posible que se vuelva a agregar en la versión final. Agregar este CSS ayudará a todas las columnas a utilizar los anchos establecidos en el thead..

Demostración de Bootstrap 4 Alpha 2


ACTUALIZAR (a partir de Bootstrap 4.0.0)

Ahora que Bootstrap 4 es flexbox, las celdas de la tabla no asumirán el ancho correcto al agregar col-*. Una solución alternativa es usar la d-inline-blockclase en las celdas de la tabla para evitar la visualización predeterminada: flexión de columnas.

Otra opción en BS4 es usar las clases de tamaños de uso para el ancho ...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Demostración de Bootstrap 4 Alpha 6

Por último, puede usar d-flexen las filas de la tabla (tr) y las col-*clases de la cuadrícula en las columnas (th, td) ...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Demostración de Bootstrap 4.0.0 (estable)

Nota: Cambiar el TR para mostrar: flex puede alterar los bordes


En realidad, eso no tiene el tamaño adecuado. Compruébelo si agrega algunos bordes para ver cómo es el tamaño y cuándo agrega una fila al cuerpo. Puse el código en la pregunta
Killerpixler

En realidad, su ejemplo de BS4-A6 no funciona si tiene contenido desbordado en una columna, ya que las otras columnas no están extendidas. Intente pegar algo de lorem ipsum en una columna.
Killerpixler

1
Tu solución funcionó. En mi caso, necesitaba agregar sin canaletas en el tr para evitar el relleno negativo jsfiddle.net/Vimalan/xhvdcasn
Vimalan Jaya Ganesh

Sí, las w-25, w-50y w-75las clases trabajan con arranque 4. Gracias!
olidem

26

Otra opción es aplicar estilo flexible en la fila de la tabla y agregar el col-classesencabezado de la tabla / elementos de datos de la tabla:

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>

1
Funciona pero vertical-align: middleya no funciona con la d-flexclase.
Víspera

De hecho, la alineación vertical no funciona en el diseño de caja flexible. Utilice align-items: baseline. Para obtener más información sobre flexbox, lea esta guía
Jacob van Lingen

12

Usar la d-flexclase funciona bien, pero algunos otros atributos ya no funcionan como la vertical-align: middlepropiedad.

La mejor manera que encontré para cambiar el tamaño de las columnas con mucha facilidad es usar el widthatributo con porcentaje solo en las theadceldas.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

5
La solución más simple y mejor, honestamente. Todo lo demás me falló miserablemente.
Criatura

3
Nota El uso del atributo de ancho para <th> ahora no es compatible con HTML5
StefanJM

10

Lo pirateé para lanzar Bootstrap 4.1.1 según mis necesidades antes de ver la publicación de @ florian_korner. Parece muy similar.

Si usa sass, puede pegar este fragmento al final de su bootstrap includes. Parece solucionar el problema de Chrome, IE y Edge. No parece romper nada en Firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

o si solo desea la utilidad css compilada:

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }

5

Descargo de responsabilidad: esta respuesta puede ser un poco antigua. Desde la versión beta de bootstrap 4. Bootstrap ha cambiado desde entonces.

La clase de tamaño de columna de la tabla se ha cambiado de esta

<th class="col-sm-3">3 columns wide</th>

a

<th class="col-3">3 columns wide</th>

Esto no parece funcionar al establecer los anchos de columna: codeply.com/go/Utyon2XEB6
Zim


1
La otra pregunta no está relacionada. Los anchos de las columnas no funcionan en las celdas de la tabla debido a BS4 alpha 6 flexbox como se explica en mi respuesta.
Zim

4

Puedo resolver este problema usando el siguiente código usando Bootstrap 4:

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>

1

A partir de Alpha 6, puede crear el siguiente archivo sass:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, td, th {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: 100% / $grid-columns * $i;
        }
      }
    }
  }
}

este código no funciona en absoluto: intenté depurarlo durante 1,5 horas, pero mi conocimiento de sass es demasiado débil para hacerlo. Por favor publique ejemplos de trabajo la próxima vez.
Slowwie
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.