如何防止包含長文本的表的垂直滾動？

我們的構建軟件具有使用表格報告構建狀態的Web界面。構建掛起時，它將輸出內部表中的最後一條日誌消息。這些日誌消息可能非常非常長。如何防止包含長文本的表的垂直滾動？

這是HTML的精華版本發出：

<html> 
<head> 
</head> 
<body> 
    <table id="StatusGrid" class="SortableGrid"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>10</td> 
     <td>11</td> 
    </tr> 
    <tr class="buildstatus"> 
     <td colspan="11"> 
      <table> 
      <tr> 
       <td>hello</td> 
       <td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td> 
      </tr> 
      </table> 
     </td> 
    </tr> 
    </table> 
</body> 
</html>

如果顯示該HTML在瀏覽器中，你必須要垂直滾動查看錶的全部內容。我不想要這個。我永不希望表擴展到瀏覽器窗口的垂直寬度以外。我不介意截斷/裁剪內部表格中的超長文本。我試過word-break: break-all，但這隻適用於Chrome。 我必須支持IE 9以及最新版本的Chrome和Firefox。

最後的皺紋：我必須用CSS來修復這個。我只能訪問應用程序的樣式表，而不是HTML。

您認爲如何？可能？

來源

2012-02-09 Aaron Jensen

嘗試在td上放置一個固定高度，並將其溢出或溢出-y設置爲隱藏;

tr.buildstatus td{ 
    height: 500px; 
    width: 600px; 
    overflow:hidden; /* or overflow-y:hidden; */ 
}

來源

2012-02-09 02:06:50 jerjer

僅供參考，這將影響該行中的所有TD。 – 2012-02-09 02:09:54

這應該適合你。您可能需要根據自己的口味調整高度/寬度。

tr.buildstatus tr td + td { 
    height:100px; 
    width:200px; 
    overflow:hidden; 
} 
table { 
    table-layout:fixed; 
    width:600px; 
    height:200px; 
}

活生生的例子：http://jsfiddle.net/R8nmk/

來源

2012-02-09 02:08:53

嘗試overflow: hidden。
溢出被剪切，其餘內容將不可見。
關於溢出的更多信息here。

來源

2012-02-19 01:40:36

如何防止包含長文本的表的垂直滾動？

回答

相關問題