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

Für Bootstrap 4.0:

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

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

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

Mit Twitter Bootstrap 2 verwenden: class="span*" wobei * eine Anzahl von Spalten der 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 eine <th> Elemente die Breite dort einstellen und nicht auf der <td> Elemente.

Answer 2

Ich hatte das gleiche Problem, ich machte die Tabelle fest und dann meine td Breite angegeben. Wenn Sie th haben, können Sie diese auch tun.

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

Vorlage:

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

Bitte verwenden Sie CSS für die Strukturierung von Layouts.

Answer 3

Anstelle der Anwendung der col-md-* Klassen zu jeder td in der Zeile können Sie eine colgroup und wenden Sie die Klassen auf die col Tag.

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

Answer 4

Hoffentlich hilft das hier 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

Answer 5

Wenn Sie Folgendes verwenden <table class="table"> auf Ihre Tabelle, Bootstrap's Tabelle Klasse fügt eine Breite von 100%, um die Tabelle. Sie müssen die Breite auf auto ändern.

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