Einfaches Schema:

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

Ich muss eine feste Breite für einrichten <td>. Ich habe es versucht:

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

Ebenfalls

td.something {
  width: 90px;
}

zum

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

Und selbst

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

Aber die Breite von <td>ist immer noch gleich.

Für Bootstrap 4.0:

In Bootstrap 4.0.0 können Sie die col-*Klassen nicht zuverlässig verwenden (funktioniert in Firefox, aber nicht in Chrome). Sie müssen die Antwort von OhadR verwenden :

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

Für Bootstrap 3.0:

Verwenden Sie class="col-md-*"bei Twitter Bootstrap 3 Folgendes: wobei * eine Anzahl von Spalten mit einer Breite ist.

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

Für Bootstrap 2.0:

Verwenden Sie class="span*"bei Twitter Bootstrap 2 Folgendes: wobei * eine Anzahl von Spalten mit einer Breite ist.

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

** Wenn Sie <th>Elemente haben , stellen Sie die Breite dort und nicht auf den <td>Elementen ein.

Ich hatte das gleiche Problem, habe die Tabelle repariert und dann meine td-Breite angegeben. Wenn Sie das haben, können Sie das auch tun.

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

Vorlage:

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

Bitte verwenden Sie CSS zum Strukturieren von Layouts.

Anstatt die col-md-*Klassen auf jede tdin der Zeile colgroupanzuwenden, können Sie eine erstellen und die Klassen auf das colTag anwenden .

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

Hoffentlich hilft dieser jemandem:

<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

Wenn Sie <table class="table">für Ihre Tabelle verwenden, fügt die Tabellenklasse von Bootstrap der Tabelle eine Breite von 100% hinzu. Sie müssen die Breite auf Auto ändern.

Wenn die erste Zeile Ihrer Tabelle eine Kopfzeile ist, müssen Sie möglicherweise die Breite zu th anstatt zu td hinzufügen.

In meinem Fall konnte ich dieses Problem beheben, indem ich min-width: 100pxanstelle width: 100pxfür die Zellen thoder verwendete td.

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

Für Bootstrap 4 können Sie einfach den Klassenhelfer verwenden:

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

Versuche dies -

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

Bootstrap 4.0

In Bootstrap 4.0 müssen wir die Tabellenzeilen durch Hinzufügen der Klasse d-flex als Flexboxen deklarieren und außerdem die Suffixe xs, md und drop löschen, damit Bootstrap sie automatisch aus dem Ansichtsfenster ableiten kann.

So wird es aussehen:

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

Hoffe, das wird jemand anderem da draußen helfen!

Prost!

Diese kombinierte Lösung hat bei mir funktioniert, ich wollte Spalten gleicher Breite

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Ergebnis: -

Ok, ich habe gerade herausgefunden, wo das Problem liegt - in Bootstrap wird als Standardwert widthfür das selectElement eingerichtet, daher lautet die Lösung:

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

Alles andere funktioniert mir nicht.

Ohne den Kontext der HTML-Seite oder den Rest Ihres CSS schwer zu beurteilen. Es kann unzählige Gründe geben, warum Ihre CSS-Regel das td-Element nicht beeinflusst.

Haben Sie spezifischere CSS-Selektoren wie z

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

Dies, um zu vermeiden, dass Ihr CSS durch eine spezifischere Regel aus dem Bootstrap-CSS überschrieben wird.

(Übrigens, in Ihrem Inline-CSS-Beispiel mit dem style-Attribut haben Sie die Breite falsch geschrieben - das könnte erklären, warum dieser Versuch fehlgeschlagen ist!)

Ich habe eine Weile mit dem Problem zu kämpfen, also nur für den Fall, dass jemand den gleichen dummen Fehler wie ich macht ... Im Inneren hatte <td>ich das Element mit white-space:preStil angewendet. Dadurch wurden alle meine table / tr / td-Tricks verworfen. Als ich diesen Stil entfernte, war plötzlich mein gesamter Text im Format schön formatiert td.

Überprüfen Sie also immer den Hauptcontainer (wie tableoder td), aber auch immer, ob Sie Ihren schönen Code nicht irgendwo tiefer stornieren :)

Verwenden Sie in Bootstrap 4 d-flex anstelle von row für "tr"

Die Sache ist, dass die "Zeilen" -Klasse mehr Breite benötigt als der übergeordnete Container, was zu Problemen führt.

<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 können Sie verwenden rowund col-*in Tabelle verwende ich es wie folgt

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

So mache ich das oft, wenn ich mich nicht mit IE beschäftigen muss

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

Auf diese Weise können Sie ein bekanntes 12-Spalten-Raster erstellen.

Nichts davon funktioniert für mich und es gibt viele Spalten, die datierbar sind, damit die% - oder sm-Klasse dem 12-Elemente-Layout auf dem Bootstrap entspricht.

Ich habe mit den Datentabellen Angular 5 und Bootstrap 4 gearbeitet und habe viele Spalten in der Tabelle. Die Lösung für mich bestand THdarin, ein DIVElement mit einer bestimmten Breite hinzuzufügen . Zum Beispiel für die Spalten "Personenname" und "Ereignisdatum" benötige ich eine bestimmte Breite, divfüge dann ein in den Spaltenkopf ein, die gesamte Spaltenbreite ändert sich dann auf die Breite, die aus dem div auf dem angegeben wird 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> ...

benutze .something ohne td oder 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>