Schema semplice:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Devo impostare una larghezza fissa per <td>. Ho provato:

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

Anche

td.something {
  width: 90px;
}

per

<td class="something">B</td>

E persino

<td style="width: 90px;">B</td>

Ma la larghezza di <td>è sempre la stessa.

Per Bootstrap 4.0:

In Bootstrap 4.0.0 non è possibile utilizzare le col-*classi in modo affidabile (funziona in Firefox, ma non in Chrome). Devi usare la risposta di 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>

Per Bootstrap 3.0:

Con twitter bootstrap 3 usa: class="col-md-*"dove * è un numero di colonne di larghezza.

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

Per Bootstrap 2.0:

Con twitter bootstrap 2 usa: class="span*"dove * è un numero di colonne di larghezza.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** Se hai degli <th>elementi imposta la larghezza lì e non sugli <td>elementi.

Avevo lo stesso problema, ho sistemato la tabella e poi ho specificato la mia larghezza td. Se hai questo puoi fare anche quelli.

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

Modello:

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

Utilizzare i CSS per strutturare qualsiasi layout.

Invece di applicare le col-md-*classi a ciascuna tdnella riga, puoi creare una colgroupe applicare le classi al coltag.

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

Spero che questo aiuti qualcuno:

<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

Se stai usando <table class="table">sul tuo tavolo, la classe di tabella Bootstrap aggiunge una larghezza del 100% alla tabella. Devi cambiare la larghezza in auto.

Inoltre, se la prima riga della tabella è un'intestazione, potrebbe essere necessario aggiungere la larghezza a th anziché a td.

Nel mio caso sono stato in grado di risolvere il problema utilizzando min-width: 100pxinvece che width: 100pxper le celle tho td.

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

Per Bootstrap 4, puoi semplicemente usare l'helper di classe:

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

Prova questo -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

Bootstrap 4.0

Su Bootstrap 4.0, dobbiamo dichiarare le righe della tabella come flex-box aggiungendo classe d-flex, e anche rilasciare xs, md, suffissi per consentire a Bootstrap di derivarlo automaticamente dal viewport.

Quindi sembrerà il seguente:

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

Spero che questo possa essere utile a qualcun altro là fuori!

Saluti!

Questa soluzione combinata ha funzionato per me, volevo colonne di uguale larghezza

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Risultato: -

Ok, ho appena capito dov'era il problema - in Bootstrap è impostato come valore predefinito widthper selectelement, quindi la soluzione è:

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

Nient'altro non mi funziona.

Difficile giudicare senza il contesto della pagina html o il resto del tuo CSS. Potrebbero esserci miliardi di ragioni per cui la tua regola CSS non influisce sull'elemento td.

Hai provato selettori CSS più specifici come

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

Questo per evitare che il tuo CSS venga sovrascritto da una regola più specifica dal cst bootstrap.

(a proposito, nel tuo esempio css inline con l'attributo style, hai sbagliato a scrivere larghezza - questo potrebbe spiegare perché quel tentativo fallito!)

Sono stato alle prese con il problema per un po ', quindi nel caso in cui qualcuno commetta lo stesso stupido errore di me ... All'interno <td>dell'elemento ho white-space:preapplicato l'elemento con stile. Ciò ha fatto scartare tutti i miei trucchi da tavolo / tr / td. Quando ho rimosso quello stile, improvvisamente tutto il mio testo è stato ben formattato all'interno di td.

Quindi, controlla sempre il contenitore principale (come tableo td) ma controlla anche se non annulli il tuo bellissimo codice da qualche parte più in profondità :)

Usa d-flex invece di row per "tr" in Bootstrap 4

Il fatto è che la classe "riga" occupa più larghezza del contenitore padre, il che introduce problemi.

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

In bootstarp 4 puoi usare rowe col-*nella tabella, lo uso come di seguito

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

È così che faccio spesso quando non devo occuparmi di 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>

In questo modo puoi avere una griglia a 12 col.

Niente di tutto questo per me, e ho molti dati su datatable per rendere la classe% o sm uguale al layout di 12 elementi sul bootstrap.

Stavo lavorando con i database Angular 5 e Bootstrap 4 e ho molti cols in tabella. La soluzione per me era nel THaggiungere un DIVelemento con una larghezza specifica. Ad esempio, per i caratteri "Nome persona" e "Data evento" ho bisogno di una larghezza specifica, quindi inserisco diva nell'intestazione col, l'intera larghezza del testo viene ridimensionata alla larghezza specificata dal div sul 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> ...

usa .something senza 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>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>