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.

Para Bootstrap 4.0:

En Bootstrap 4.0.0 no puede usar las col-*clases de manera confiable (funciona en Firefox, pero no en Chrome). Debe 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 twitter bootstrap 3 use: 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 twitter bootstrap 2 use: class="span*"donde * es un número 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 <th>elementos, establezca el ancho allí y no en los <td>elementos.

Estaba teniendo el mismo problema, arreglé la tabla y luego especifiqué mi ancho td. Si tienes esto, puedes hacerlo también.

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Modelo:

<td style="width:10%">content</td>

Utilice CSS para estructurar cualquier diseño.

En lugar de aplicar las col-md-*clases a cada una tdde las filas, puede crear colgroupay aplicar las clases a la coletiqueta.

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

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>

https://github.com/twbs/bootstrap/issues/863

Si está utilizando <table class="table">su tabla, la clase de tabla de Bootstrap agrega un ancho del 100% a la tabla. Necesita cambiar el ancho a automático.

Además, si la primera fila de la tabla es una fila de encabezado, es posible que deba agregar el ancho a th en lugar de td.

En mi caso pude solucionar ese problema usando en min-width: 100pxlugar de width: 100pxpara las celdas tho td.

.table td, .table th {
    min-width: 100px;
}

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>

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 de la ventana gráfica.

Entonces se verá a continuación:

<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 útil para alguien más por ahí!

¡Salud!

Esta solución combinada funcionó para mí, quería columnas de igual ancho

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

Resultado: -

Ok, acabo de descubrir dónde estaba el problema: en Bootstrap está configurado como un valor predeterminado widthpara el selectelemento, por lo tanto, la solución es:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

Cualquier otra cosa no me funciona.

Difícil de juzgar sin el contexto de la página html o el resto de su CSS. Puede haber muchas razones por las cuales su regla CSS no está afectando al elemento td.

¿Has probado selectores CSS más específicos como

tr.somethingontrlevel td.something {
  width: 90px;
}

Esto para evitar que su CSS sea anulado por una regla más específica del CSS de arranque.

(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é falló ese intento!)

He estado luchando con el problema por un tiempo, así que en caso de que alguien cometa el mismo error estúpido que yo ... En el interior <td>tuve el elemento con white-space:preestilo aplicado. Eso hizo que todos mis trucos de mesa / tr / td fueran descartados. Cuando eliminé ese estilo, de repente todo mi texto estaba bien formateado dentro del td.

Por lo tanto, siempre verifique el contenedor principal (como tableo td) pero también, siempre verifique si no cancela su hermoso código en algún lugar más profundo :)

Use d-flex en lugar de fila para "tr" en Bootstrap 4

La cuestión es que la clase "fila" ocupa más ancho que el contenedor principal, lo que presenta problemas.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

En bootstarp 4 puedes usar rowy col-*en la tabla, lo uso de la siguiente manera

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

Así es como lo hago a menudo cuando no tengo que lidiar con IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

De esa manera puede tener una cuadrícula familiar de 12 col.

Nada de esto funciona para mí, y tengo muchos cols en la tabla de datos para hacer que la clase% o sm sea igual a un diseño de 12 elementos en bootstrap.

Estaba trabajando con tablas de datos Angular 5 y Bootstrap 4, y tengo muchos cols en la tabla. La solución para mí fue THagregar un DIVelemento con un ancho específico. Por ejemplo, para los cols "Nombre de la persona" y "Fecha del evento", necesito un ancho específico, luego coloque un divencabezado col, el ancho completo del col se redimensiona al ancho especificado desde el div en 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> ...

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