Wie lege ich die maximale Breite für Tabellenzellen mithilfe von Prozentsätzen fest?

Maximale Breite für Tabellenzellen mit Prozentsätzen festlegen

Das Festlegen einer maximalen Breitenbeschränkung mithilfe von Prozentsätzen für Tabellenzellen kann schwierig sein. Betrachten Sie das folgende Beispiel:

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

In diesem Fall wird die Einstellung für die maximale Breite nicht wirksam. Wie können wir dies also mithilfe von Prozentsätzen erreichen?

Die Lösung

Die Lösung besteht darin, die Eigenschaft table-layout für das Tabellenelement zu verwenden. Indem wir es auf fest setzen, können wir die Größe der Tabellenzellen proportional ändern:

table {
  width: 100%;
  table-layout: fixed;
}

Diese CSS-Regel stellt sicher, dass die Tabellenbreite den gesamten verfügbaren Platz einnimmt und die Tabellenzellen ihre Breite anpassen entsprechend. Die prozentualen Einstellungen für die maximale Breite einzelner Zellen werden nun berücksichtigt.

Beispiel:

<table>

Durch Hinzufügen von table-layout: Fixed, der Beschränkung der maximalen Breite für die zweite Tabellenzelle wird effektiv angewendet, wodurch ihre Breite relativ zur übergeordneten Tabelle verringert wird.

Das obige ist der detaillierte Inhalt vonWie lege ich die maximale Breite für Tabellenzellen mithilfe von Prozentsätzen fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!