I have a HTML table with 3 'groups' of columns, left, middle and right.
+----------------------------------+ | L-1 | L-2 | M | R1 | R2 | +-----+-----+------------+----+----+ | x | z | aaaaaaa... | 1 | 2 | | y | w | bbbbbbb... | 3 | 4 | +-----+-----+------------+----+----+
I would like to confine the table to the width of the browser window, when there is a very long string in the middle ("M") column.
I tried to use CSS word-break on this column, as described in wordwrap a very long string.
Below is the HTML (exemplified). The CSS contains my thoughts regarding how this should (but apparently doesn't) work.
What am I doing wrong?
<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>
The result right now is that no word wrapping takes place, instead the table unwantedly shoots out to the far right and causes a scrollbar in the browser window.
This seems to work perfectly:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
th,td { vertical-align:top; padding:0 5px; }
.left { text-align:center; }
.right { text-align:right; }
.middle { text-align:left; width:100%; }
</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>w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​w​</td>
<td class=right>glyp</td>
<td class=right>glof</td>
</tr>
</table>
</body>
</html>
The trick above is to just insert a non-visible whitespace (​
) every now and then.
I hate answering my own questions though, so I'll wait for someone to come up with something prettier before closing this.