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