Wie kann die maximale Breite einer Tabellenzelle effektiv mit Prozentsätzen gesteuert werden?

Erweitern der CSS-Funktionen für die maximale Breite von Tabellenzellen: Nutzung von Prozentsätzen

Im Bereich von HTML-Tabellen ist es oft wünschenswert, das Maximum zu kontrollieren Breite der Tabellenzellen, insbesondere wenn es um lange Texte geht oder die geräteübergreifende Kompatibilität gewährleistet ist. Beim Festlegen der maximalen Breite mithilfe von Prozentsätzen kann es jedoch manchmal zu Einschränkungen kommen.

Im angegebenen Codeausschnitt:

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

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

Das Anwenden der maximalen Breite als Prozentsatz auf Tabellenzellen würde deren Breite intuitiv entsprechend anpassen . Es können jedoch Browserkompatibilitätsprobleme auftreten, die zu inkonsistentem Rendering führen.

Um diese Einschränkungen zu überwinden, gibt es eine weniger bekannte Lösung: die CSS-Eigenschaft „table-layout“. Indem wir „table-layout: Fixed“ für das Tabellen-Tag festlegen, können wir ein Layout mit fester Breite für alle darin enthaltenen Zellen festlegen. Dies bietet eine konsistente und zuverlässige Methode zur Steuerung der maximalen Breite von Zellen mithilfe von Prozentsätzen.

table {
  width: 100%;
  table-layout: fixed;
}
td {
  max-width: 67%;
}

Mit diesem Ansatz kann die maximale Breite von Zellen unabhängig von Browserkompatibilitätsproblemen effektiv mithilfe von Prozentsätzen gesteuert werden. Sehen Sie sich das folgende aktualisierte Fiddle an, um es in Aktion zu erleben: http://jsfiddle.net/Fm5bM/4/.

Das obige ist der detaillierte Inhalt vonWie kann die maximale Breite einer Tabellenzelle effektiv mit Prozentsätzen gesteuert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!