tables span modal column bootstrap css twitter-bootstrap html-table twitter-bootstrap-4 bootstrap-4

css - span - modal bootstrap



TamaƱo de columna de tabla (7)

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

En Bootstrap 3 , podría aplicar col-sm-xx a las etiquetas th en el thead y cambiar el tamaño de las columnas de la tabla 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 codeply siempre que no tenga el tamaño adecuado, especialmente si agrega algunos datos a la tabla. Vea 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>


El uso d-flex clase d-flex funciona bien, pero algunos otros atributos ya no funcionan como vertical-align: middle .

La mejor manera que encontré para dimensionar columnas muy fácilmente es usar el atributo de width con porcentaje solo en thead celdas.

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


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

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

a

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


Otra opción es aplicar un estilo flexible en la fila de la tabla y agregar las col-classes a los elementos de encabezado / 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>


Pirateé esto para el lanzamiento de Bootstrap 4.1.1 según mis necesidades antes de ver la publicación de @ florian_korner. Se ve muy similar.

Si usa sass, puede pegar este fragmento al final de su arranque incluido. 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 quieres 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%; }


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>


Actualizado 2018

Asegúrese de que su tabla incluya la clase de table . Esto se debe a que las tablas Bootstrap 4 son "opcionales", por lo que la clase de table 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é esto no es Bootstrap 4 alpha, pero puede agregarse nuevamente en la versión final. Agregar este CSS ayudará a todas las columnas a usar los anchos establecidos en el thead ..

Bootstrap 4 Alpha 2 Demo

ACTUALIZACIÓN (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 clase d-inline-block 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ño de utilidades para ancho ...

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

Bootstrap 4 Alpha 6 Demo

Por último, puede usar d-flex en las filas de la tabla (tr) y las clases de cuadrícula col-* 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