Tamaño de la columna de la tabla

Question 1

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>

Question 2

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

Question 3

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>

Question 4

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>

Question 5

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

Question 6

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>

Question 7

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>

Question 8

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

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

olidem

Answer 8

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>

Jacob van Lingen
fuente

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

Answer 9

1

Funciona pero vertical-align: middleya no funciona con la d-flexclase.

Víspera

Answer 10

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

Answer 11

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>

Answer 12

5

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

Criatura

Answer 13

3

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

StefanJM

Answer 14

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

Answer 15

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>

Abdalla Arbab
fuente

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

Zim

Vea esto stackoverflow.com/questions/41794746/…

Abdalla Arbab

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

Answer 16

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

Zim

Answer 17

Vea esto stackoverflow.com/questions/41794746/…

Abdalla Arbab

Answer 18

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

Answer 19

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>

Answer 20

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

Answer 21

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

Tamaño de la columna de la tabla

Respuestas: