如何在表格中自動換行一列，並將表格大小設置爲瀏覽器窗口

我有一個帶有3個「組」的HTML表格，左側，中間和右側。如何在表格中自動換行一列，並將表格大小設置爲瀏覽器窗口

 
+----------------------------------+ 
| L-1 | L-2 | M   | R1 | R2 | 
+-----+-----+------------+----+----+ 
| x | z | aaaaaaa... | 1 | 2 | 
| y | w | bbbbbbb... | 3 | 4 | 
+-----+-----+------------+----+----+

我想將表限制在瀏覽器窗口的寬度，當中間（「M」）列中有一個非常長的字符串。

我試圖在此列上使用CSS word-break，如wordwrap a very long string中所述。

下面是HTML（例示）。 CSS包含了我對這個應該如何（但顯然不起作用）的想法。

我在做什麼錯？

 
<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>

，現在的結果是，沒有單詞環繞發生，而不是表不必要地拍攝出最右側，並導致在瀏覽器窗口滾動條。

來源

2011-01-08 rosenfield

相關的變化：

新增table { table-layout:fixed }你的CSS。
將width="100%"添加到您的table。
刪除了多餘的div，並將.wrap類添加到td類.middle。
將width=100屬性添加到您的其他列。

HTML全文：

<html> 
<head> 
    <style type='text/css'> 
    table { table-layout:fixed; /* 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; /* expand this column to as large as it can get within table? */} 
    .wrap { word-wrap:break-word; /* use up entire cell this div is contained in? */ } 
    </style> 
</head> 
<body> 
    <table width="100%"> 
    <tr> 
    <th class=left width=100>L-1</th> 
    <th class=left width=100>L-2</th> 
    <th class=middle>M</th> 
    <th class=right width=100>R-1</th> 
    <th class=right width=100>R-2</th> 
    </tr> 
    <tr> 
    <td class=left>argle</td> 
    <td class=left>bargle</td> 
    <td class="middle wrap">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td> 
    <td class=right>glyp</td> 
    <td class=right>glof</td> 
    </tr> 
    </table> 
</body> 
</html>

來源

2011-01-09 11:54:36 thirtydot

感謝您的支持！不太有效，L和R列包含用戶輸入，因此我無法將它們修復爲100像素。 – rosenfield 2011-01-10 17:57:58

此作品乍一看：

<!DOCTYPE html> 
<html> 
<head> 
    <style type='text/css'> 
    td { vertical-align:top; } 
    .left { text-align:center; } 
    .right { text-align:right; } 
    .middle, 
    .middle iframe { 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><iframe style='border:0' src='data:text/html,%3Cbody style=%22margin:0;word-wrap:break-word%22%3Ewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww%3C/body%3E'></iframe></td> 
    <td class=right>glyp</td> 
    <td class=right>glof</td> 
    </tr> 
    </table> 
</body> 
</html>

但是當你添加另一行，因爲嵌入式IFRAME具有靜態高度休息。

來源

2011-01-10 18:47:22 rosenfield

這似乎很好地工作：

<!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&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;</td> 
    <td class=right>glyp</td> 
    <td class=right>glof</td> 
    </tr> 
    </table> 
</body> 
</html>

上面的竅門是隻需插入一個不可見的空白（）飄飛。

雖然我討厭回答我自己的問題，所以我會等待有人在關閉它之前想出更漂亮的東西。

來源

2011-01-10 19:07:15 rosenfield

Thanx男人U做得很好，解決了我的問題。 – 2012-04-20 13:51:57

如何在表格中自動換行一列，並將表格大小設置爲瀏覽器窗口

回答

相關問題