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

Diese kombinierte Lösung hat bei mir funktioniert, da ich gleich breite Spalten wollte.

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Ergebnis :-

Answer 2

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

Die Sache ist, dass die Klasse "row" mehr Breite als der übergeordnete Container einnimmt, 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>

Answer 3

Ok, ich habe gerade herausgefunden, wo war das Problem - in Bootstrap ist als Standardwert eingerichtet width für select Element, so dass die Lösung lautet:

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

Alles andere funktioniert bei mir nicht.

Answer 4

So mache ich es oft, wenn ich mich nicht mit IE befassen 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 vertrautes 12-Spalten-Raster verwenden.

Answer 5

Schwer zu beurteilen, ohne den Kontext der Seite html oder den Rest Ihrer CSS. Es könnte eine Zillion Gründe geben, warum Ihre CSS-Regel das td-Element nicht beeinflusst.

Haben Sie spezifischere CSS-Selektoren ausprobiert, wie z. B.

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 width falsch geschrieben - das könnte erklären, warum dieser Versuch fehlgeschlagen ist).