it-swarm.com.de

Festlegen der Breite für <td>

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

Die Breite von <td> ist jedoch gleich.

418
user984621

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:

Bei Twitter Bootstrap 3 verwenden Sie: class="col-md-*" wobei * eine Anzahl von Spalten mit 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:

Bei Twitter Bootstrap 2 verwenden Sie: class="span*" wobei * eine Anzahl von Spalten mit 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, legen Sie die Breite dort fest und nicht die <td>-Elemente.

902
Paulo

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

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

Vorlage:

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

Verwenden Sie zur Strukturierung von Layouts CSS.

107
DDDD

Anstatt die col-md-*-Klassen auf jede td in der Zeile anzuwenden, können Sie eine colgroup erstellen und die Klassen auf den Tag col 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

67
stormwild

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

Wenn es sich bei der ersten Zeile Ihrer Tabelle um eine Kopfzeile handelt, müssen Sie möglicherweise die Breite statt zu td hinzufügen.

53
meobyte

Hoffentlich hilft dies 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

37
OhadR

In meinem Fall konnte ich dieses Problem mit min-width: 100px anstelle von width: 100px für die Zellen th oder td beheben.

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

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

Versuche dies -

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

Diese kombinierte Lösung funktionierte für mich, ich wollte Spalten mit gleicher Breite

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Ergebnis: -

 enter image description here

7
Hitesh Sahu

Bootstrap 4.0

Bei Bootstrap 4.0 müssen wir die Tabellenzeilen als Flex-Boxen deklarieren, indem Sie die Klasse d-flex hinzufügen. Außerdem müssen Sie die Suffixe xs, md löschen, damit Bootstrap es automatisch aus dem Viewport ableiten kann.

So wird es wie folgt 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 für jemand anderen da draußen hilfreich sein!

Prost!

4
Randika Vishman

Ok, ich habe gerade herausgefunden, wo das Problem war - in Bootstrap ist als Standardwert width für das Element select festgelegt. Die Lösung ist also:

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

Alles andere funktioniert nicht.

3
user984621

Ich habe eine Weile mit dem Thema gekämpft, also nur für den Fall, dass jemand den gleichen dummen Fehler wie ich macht ... Im <td> hatte ich das Element mit dem white-space:pre-Stil angewendet. Das hat alle meine Tricks verworfen. Als ich diesen Stil entfernte, wurde plötzlich mein ganzer Text in der td formatiert.

Überprüfen Sie also immer den Hauptcontainer (wie table oder td), und überprüfen Sie auch, ob Sie den Code nicht irgendwo tiefer stornieren. :)

2
Mikk

Schwer zu beurteilen ohne den Kontext der HTML-Seite oder des restlichen CSS. Es gibt eine Vielzahl von Gründen, warum Ihre CSS-Regel das td-Element nicht beeinflusst.

Haben Sie spezifischere CSS-Selektoren ausprobiert, wie z

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

Dies soll verhindern, dass Ihr CSS durch eine spezifischere Regel der 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!)

2
David Heijl

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

0
gecko

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>

0
user10861319

Nichts davon funktioniert für mich, und es gibt viele Spalten für datable, um% oder sm-Klasse gleich dem 12-Elemente-Layout auf Bootstrap zu machen.

Ich arbeitete mit den Datentypen Angular 5 und Bootstrap 4 und habe viele Spalten in der Tabelle. Die Lösung für mich bestand in der TH, um ein DIV-Element mit einer bestimmten Breite hinzuzufügen. Für die Spalten "Personenname" und "Ereignisdatum" brauche ich zum Beispiel eine bestimmte Breite. Dann füge eine div in den Spaltenkopf ein. Die gesamte Spaltenbreite wird dann auf die vom div angegebene Breite für die TH geändert: 

<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> ...
0
Axel Osorio