如何將表格寬度限制爲包含元素（或屏幕）？

我需要使用table來顯示錶格數據，但它將在流體佈局中;我想要填充整個可用寬度，但不能水平擴展超過最大屏幕寬度，以致body不會獲得水平滾動條。相反，太寬的td元素應該得到滾動條。如何將表格寬度限制爲包含元素（或屏幕）？

在該例子中存在tableDATA，所述table具有border:1px solid black和從捲曲管道以及（因此white-space:pre）當輸出應爲容易解析; div只是普通的CSS佈局助手，如果可能的話，我們也可以擺脫它！

最重要的部分是，它應是沒有固定的像素寬度佈局類型和table應的情況下數據大於可用寬度小並不需要那麼多空間。總而言之，一張簡單的桌子不會比屏幕寬。理想情況下，table只會伸展父母元素，直到達到該封閉元素的max-width，然後不會變寬。

在Chrome，東西我認爲是一個邪惡的黑客，我一定要堅持的table在可用的最大寬度，如果需要顯示在td滾動條。然而，這對於FF來說不起作用，也不是那種可以被認爲是正確的解決方案。

下面的例子可以在https://hydra.geht.net/table-quirx.html發現了一會：

<head> 
<title>Obey max-width for table</title> 
<style> 
.nw    { white-space:nowrap } 
.quirx div  { width:100%; max-width:100%; white-space:pre } 
.quirx td  { max-width:90px; border:1px solid black } 
.quirx td+td { max-width:500px; overflow:auto } 
table.quirx  { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse } 
td    { align:left; max-width:100% } 
</style> 
</head> 
<body> 
<table summary="" class="quirx"><tr><td colspan="3"> 
Just some info 
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> 
</td></tr></table> 
</body> 
</html>

注意「合併單元格= 3」是沒有錯誤在這裏，在我的應用程序有時第三列可能會出現，這不能在輸出table標題時已知。（一些樣式的事情是多餘的，太。）上述

訣竅在於，該td的max-width一起是比通常的畫面（590px）和table然後被拉伸到給定width，這是100％更小的。由於td不能伸展到屏幕之外，所以div的overflow屬性可以按預期工作。然而在FF中，它不能以這種方式工作，既不與width也不與max-width（這可能是由於它們的inline-狀態）。 Chrome a width:100%或類似的不適用於td和tr元素。請注意，使用max-width可以得到比width更令人愉快的表格佈局（我不明白其中的差別）。

除此之外，這隻能在Chrome，另一個錯誤是，該table使用即使如果只有小數據以顯示不需要全屏幕寬度的錯誤。

有關的一些注意事項都：

我覺得這這裏是一個非常基本的東西，我很困惑，爲什麼它似乎很難用CSS來表達
一個目標是要保持它不受任何JavaScript，因此只能用黑客CSS
用戶可以從800像素調整窗口的大小，例如以1920px甚至更寬，並且因此table的寬度應自動跟隨（沒有JavaScript）
它應顯示在文本良好基於瀏覽器的瀏覽器如Lynx和w3m，也從curl
管道它應在主要4顯示更多或更少的情況下正確地
輸出不須容易解析過於混亂（IE，FF，鉻，野生動物園）
它不得打破別人（它可以提供錯誤，但內容不能隱藏）

我真的不知道如何存檔。也許這是一個常見問題，但我無法自己發現解決方案。

來源

2011-02-06 Tino

（我的回答談到稍晚一點，或許比期望的，但也許這將是對你有用或別人無 - 少...

我在內的一些標記（下文）我做了測試HTML/CSS實現什麼，我相信你想要的。

有一種固定寬度的單元格樣式「fixedcell」和流體寬度的單元格樣式「fluidcell」。

固定寬度我給自己定在一個固定的寬度（對於這個例子是75px）簡單來說明更好的東西。

對

流體寬度那些具有寬度：自動所以它們填充剩餘的表空間的寬度;它們還具有重要的白色空間：NOWRAP，使文本不會擴展單元高度方向（空白：預作品太）;最後他們有溢出：隱藏，使文本不會溢出的寬度，使事情醜，或者你可以設置溢出：滾動爲它在這些細胞中，當/如果需要滾動條。

表被設定爲100％的寬度，以便根據需要將擴大，以適應屏幕/等。和關於表的風格最重要的事情是表格的佈局：固定，這使得表堅持到頁面佈局更正確，而不是基於自身的內容自動調整大小本身（表格的佈局：自動）。

我還添加了一些邊界來幫助說明表和單元格的邊界。

<html> 
<head> 
    <title>Table with auto-width sizing and overflow hiding.</title> 
    <style type="text/css"> 
     table {width:100%; border:solid 1px red; table-layout:fixed;} 
     table td {border:solid 1px green;} 
     .fixedcell {width:75px;} 
     .fluidcell {width:auto; overflow:hidden; white-space:nowrap;} 
    </style> 
</head> 
<body> 
    Table with one fluid column: 
    <table> 
     <tr> 
      <td class="fixedcell">row 1</td> 
      <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td> 
      <td class="fixedcell">fixie</td> 
      <td class="fixedcell">another</td> 
     </tr> 
    </table> 

    Table with two fluid columns: 
    <table> 
     <tr> 
      <td class="fixedcell">row 1</td> 
      <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td> 
      <td class="fluidcell">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td> 
      <td class="fixedcell">fixie</td> 
      <td class="fixedcell">another</td> 
     </tr> 
    </table> 
</body>

我在幾個現代瀏覽器進行了測試，似乎在每個正常工作。

PS。雖然表格對於頁面佈局來說一般是不允許的，但表格是正確的，並且鼓勵使用表格數據佈局。

來源

2011-03-24 21:30:53 devlop

這很有用。我遇到了問題，桌面佈局似乎在發揮作用。謝謝 – huyz 2011-09-18 14:40:49

如何將表格寬度限制爲包含元素（或屏幕）？

回答

相關問題