Wie kann man eine feste Breite für <td> einrichten?

Question

Einfaches Schema:

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

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

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

Auch

td.something {
  width: 90px;
}

für

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

Und selbst

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

Aber die Breite der <td> ist immer noch derselbe.

Answer 1

In Bootstarp 4 können Sie Folgendes verwenden row y col-* in der Tabelle, ich verwende sie 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>

Answer 2

Ich kämpfe schon eine Weile mit dem Problem, also nur für den Fall, dass jemand den gleichen dummen Fehler macht wie ich... Im Inneren der <td> Ich hatte das Element mit white-space:pre Stil angewandt. Dadurch wurden alle meine table/tr/td-Tricks verworfen. Als ich diese Formatvorlage entfernte, war plötzlich mein gesamter Text innerhalb der td .

Überprüfen Sie also immer den Hauptcontainer (wie table ou td ), aber auch, immer überprüfen, ob Sie nicht kündigen Ihre schönen Code irgendwo tiefer :)

Answer 3

Verwenden Sie festes Tabellenlayout css in der Tabelle, und legen Sie einen Prozentsatz des td.

Answer 4

Ich stand auch vor diesem Problem und ich folge diesem Ansatz, um es zu überwinden... Sie können also versuchen

<td style="min-width:120px;">B</td>

Answer 5

In meinem Fall habe ich es folgendermaßen gelöst

<style>
td {
    min-width: 175px;
}
</style>

So erhält jede Tabellenzelle eine Mindestbreite von 175px. Sie können den Wert ändern, um ihn an Ihre Zwecke anzupassen.

Mehr über die Mindestbreite finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width?retiredLocale=de