如何隱藏表格行溢出？

我有一些HTML表格，其中的文字數據太大，不適合。因此，它會垂直擴展單元以適應此。因此，現在具有溢出的行比具有較小數據量的行高兩倍。這是無法接受的。我如何強制表格具有相同的行高度1em？如何隱藏表格行溢出？

這是一些重現問題的標記。表格只能是一行的高度，並且隱藏溢出文本。

<!DOCTYPE html> 

<html> 
    <head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     table { width:250px; } 
     table tr { height:1em; overflow:hidden; } 
    </style> 
    </head> 
    <body> 
    <table border="1"> 
     <tr> 
     <td>This is a test.</td> 
     <td>Do you see what I mean?</td> 
     <td>I hate this overflow.</td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2009-10-12 Josh Stodola

您使用「

」而不是使用div/spans + CSS來執行此操作的任何特定原因？第二種方法更容易讓人感到痛苦，但提供更大的靈活性。我不確定使用常規表格可以做什麼。 – 2009-10-12 14:56:26

+68

我正在使用'table'，因爲我正在顯示錶格數據！ – 2009-10-12 16:31:41

回答

需要在對細胞table和white-space:nowrap;指定兩個屬性，table-layout:fixed。你還需要將overflow:hidden;移動到細胞過於

table { width:250px;table-layout:fixed; } 
table tr { height:1em; } 
td { overflow:hidden;white-space:nowrap; }

Here's a Demo。測試Firefox 3.5.3和IE 7

來源

2009-10-12 14:58:49

唯一的缺點（看起來）是表格單元寬度相同。任何方式來解決這個問題？ – 2009-10-12 15:53:01

據我所知 - 我相信在瀏覽器部分做了一個假設，因爲沒有定義單獨的單元寬度，所以要在單元數量中均勻分割表格寬度。解決這個問題的唯一可能的方法是我可以想到的是，根據每個單元格包含的字符數（在所有單元格的總字符數之外）計算每個單元格的寬度，無論是服務器還是客戶端（前者可能是更高性能的選擇）。這聽起來有點矯枉過正？ – 2009-10-12 16:01:59

在所討論的行上的所有單元格中的字符總數是我在最後一條評論中的含義:) – 2009-10-12 16:03:05

唯一的缺點（看起來），是表格單元格寬度是相同的。任何的方式來解決這個問題？ - 喬希斯托多拉 10月12日在15:53

只要定義表和寬度的寬度爲每個表單元格

像

table {border-collapse:collapse; table-layout:fixed; width:900px;} 
th {background: yellow; } 
td {overflow:hidden;white-space:nowrap; } 
.cells1{width:300px;} 
.cells2{width:500px;} 
.cells3{width:200px;}

它的工作原理就像一個魅力：O）

來源

2009-11-05 15:12:03 Popara

但寬度將根據要在其中顯示多少數據而波動。這不像我在這裏使用等寬字體！ – 2009-11-05 15:34:46

通常，如果您使用的是white-space: nowrap;，可能是因爲您知道哪些列將包含包裝（或拉伸單元）的內容。對於這些列，我通常用特定的class屬性將單元格的內容包裝在span中，並應用特定的width。

例子：

HTML：

<td><span class="description">My really long description</span></td>

CSS：

span.description { 
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 150px; 
}

來源

2011-03-04 16:15:16 user645077

工作得很好.. – Ben 2011-11-16 05:14:37

謝謝你，這是非常有益的。 – 2012-06-26 15:12:39

比固定整個表格更好的方法。 – 2012-11-26 13:05:20

在最現代的瀏覽器，你現在可以指定：

<table> 
<colgroup> 
    <col width="100px" /> 
    <col width="200px" /> 
    <col width="145px" /> 
</colgroup> 
<thead> 
    <tr> 
    <th>My 100px header</th> 
    <th>My 200px header</th> 
    <th>My 145px header</th> 
    </tr> 
</thead> 
<tbody> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
    <td>200px is all you get - anything more hides due to overflow.</td> 
    <td>100px is all you get - anything more hides due to overflow.</td> 
</tbody> 
</table>

然後，如果你從上面的帖子應用樣式，如下所示：

table { 
    table-layout: fixed; /* This enforces the "col" widths. */ 
} 
table th, table td { 
    overflow: hidden; 
    white-space: nowrap; 
}

結果給你整個表很好地隱藏溢出。適用於最新的Chrome，Safari，Firefox和IE。我在9之前沒有在IE中進行過測試 - 但我的猜測是它可以回到7，甚至可能有足夠的幸運看到5.5或6的支持。 ;）

來源

2012-06-13 21:15:21

如果javascript被接受爲答案，我做了一個jQuery插件來解決這個問題（有關該問題的更多信息，請參見CSS: Truncate table cells, but fit as much as possible）。

使用插件只需鍵入

$('selector').tableoverflow();

插件：https://github.com/marcogrcr/jquery-tableoverflow

完整的示例：http://jsfiddle.net/Cw7TD/3/embedded/result/

來源

2013-05-13 14:14:36 Marco

Here's東西我試過了。基本上，我把「靈活」的內容（包含太長行的td）放在一行高的div容器中，隱藏溢出。然後，我讓文字換成不可見的。儘管你可以在斷詞處獲得休息時間，但不僅僅是平穩的截止時間。

table { 
    width: 100%; 
} 

.hideend { 
    white-space: normal; 
    overflow: hidden; 
    max-height: 1.2em; 
    min-width: 50px; 
} 
.showall { 
    white-space:nowrap; 
} 

<table> 
    <tr> 
     <td><div class="showall">Show all</div></td> 
     <td> 
      <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div> 
     </td> 
     <td> 
      <div class="showall">Show all this too</div> 
     </td> 
    </tr> 
</table>

來源

2014-02-27 08:52:53

我應該補充一點，這裏的優點是我不需要設置任何絕對寬度的列。設計流暢。 – 2014-02-27 09:00:40

這裏的問題是，你怎麼知道哪個小區哪一個類分配給？除非你手動鍵入每一頁，你永遠需要，Web 1.0的風格，這是不是一個包羅萬象的解決方案。 – 2015-10-28 09:35:34

包裹表在DIV帶class = 「容器」

div.container { 
    width: 100%; 
    overflow-x: auto; 
}

然後

#table_id tr td { 
    white-space:nowrap; 
}

結果

來源

2018-03-03 08:57:13

相關問題