Ich habe eine HTML-Tabelle mit 3 'Gruppen' Spalten, links, Mitte und rechts.Wie man eine Spalte in eine Tabelle einfügt, mit Tabellengröße zum Browserfenster
+----------------------------------+ | L-1 | L-2 | M | R1 | R2 | +-----+-----+------------+----+----+ | x | z | aaaaaaa... | 1 | 2 | | y | w | bbbbbbb... | 3 | 4 | +-----+-----+------------+----+----+
Ich mag die Tabelle auf die Breite des Browserfensters beschränken, wenn es eine sehr lange Zeichenfolge in der Mitte („M“) Spalte ist.
Ich habe versucht, CSS-Wortbruch in dieser Spalte zu verwenden, wie in wordwrap a very long string beschrieben.
Unten ist das HTML (Beispiel). Das CSS enthält meine Gedanken darüber, wie dies funktionieren sollte (aber anscheinend nicht).
Was mache ich falsch?
<html> <head> <style type='text/css'> table { /* nothing here - table is block, so should auto expand to as large as it can get without causing scrollbars? */ } .left { text-align:center; } .right { text-align:right; } .middle { text-align:left; width:100%; /* expand this column to as large as it can get within table? */} .wrap { word-wrap:break-word; width:100%; /* use up entire cell this div is contained in? */ } </style> </head> <body> <table> <tr> <th class=left>L-1</th> <th class=left>L-2</th> <th class=middle>M</th> <th class=right>R-1</th> <th class=right>R-2</th> </tr> <tr> <td class=left>argle</td> <td class=left>bargle</td> <td class=middle><div class=wrap>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td> <td class=right>glyp</td> <td class=right>glof</td> </tr> </table> </body> </html>
Das Ergebnis ist im Moment, dass kein Zeilenumbruch stattfindet, statt die Tabelle unwantedly auf der rechten Seite schießt aus und verursacht eine Scrollbar im Browser-Fenster.
Danke, dass Sie es versuchen! Funktioniert nicht ganz, die Spalten L und R enthalten Benutzereingaben, daher kann ich sie nicht auf 100 Pixel fixieren. – rosenfield