css - plantillas - tablas personalizadas en bootstrap
Bootstrap: ¿cómo configurar un ancho fijo para<td>? (15)
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.
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 desde la ventana gráfica.
Así se verá el siguiente:
<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 de ayuda para alguien más por ahí!
¡Aclamaciones!
Para Bootstrap 4.0:
En Bootstrap 4.0.0 no puede usar las clases col-* manera confiable (funciona en Firefox, pero no en Chrome). Necesitas 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 el uso de twitter bootstrap 3: 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 el uso de Twitter Bootstrap 2: class="span*" donde * es una cantidad 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 elementos <th> establezca el ancho allí y no en los elementos <td> .
Difícil de juzgar sin el contexto de la página html o el resto de tu CSS. Puede haber miles de razones por las que su regla de CSS no afecta al elemento td.
¿Has probado selectores de CSS más específicos como
tr.somethingontrlevel td.something {
width: 90px;
}
Esto para evitar que su CSS sea sobreescrito por una regla más específica del bootstrap css.
(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é ese intento falló!)
En lugar de aplicar las clases col-md-* a cada td en la fila, puede crear un colgroup y aplicar las clases a la etiqueta col .
<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 here
En mi caso, pude arreglar ese problema usando min-width: 100px lugar de width: 100px para las celdas th o td .
.table td, .table th {
min-width: 100px;
}
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>
Estaba teniendo el mismo problema, arreglé la tabla y luego especifiqué el ancho de mi td. Si tienes th puedes hacer eso también.
table {
table-layout: fixed;
word-wrap: break-word;
}
Modelo:
<td style="width:10%">content</td>
Por favor use CSS para estructurar cualquier diseño.
He estado luchando con el problema por un tiempo, así que en caso de que alguien cometa el mismo error estúpido que yo ... Dentro de <td> tuve el elemento con white-space:pre aplicó el estilo white-space:pre . Eso hizo que todos mis trucos de mesa / tr / td fueran descartados. Cuando quité ese estilo, de repente, todo mi texto estaba bien formateado dentro de la td .
Por lo tanto, siempre revise el contenedor principal (como table o td ), pero también, siempre verifique si no cancela su código más bonito en algún lugar más profundo :)
Nada de esto me funciona, y tengo muchos cols en datatable para que% o sm class sea igual a 12 elementos de diseño en bootstrap.
Estaba trabajando con los datos de Angular 5 y Bootstrap 4, y tengo muchos cols en la tabla. La solución para mí estaba en el TH para agregar un elemento DIV con un ancho específico. Por ejemplo, para las columnas "Nombre de la persona" y "Fecha del evento" necesito un ancho específico, luego coloco un div en el encabezado de la columna, el ancho de toda la columna se redimensiona al ancho especificado de la div en el 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> ...
Ok, acabo de descubrir dónde estaba el problema: en Bootstrap se configura como un valor predeterminado de width para el elemento select , por lo tanto, la solución es:
tr. something {
td {
select {
width: 90px;
}
}
}
Cualquier otra cosa no me funciona.
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>
...
Prueba esto -
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
Si está utilizando <table class="table"> en su tabla, la clase de tabla de Bootstrap agrega un ancho del 100% a la tabla. Necesitas cambiar el ancho a auto.
Además, si la primera fila de su tabla es una fila de encabezado, es posible que deba agregar el ancho a th en lugar de td.
utilizar. 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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>