如何防止包含长文本的表的垂直滚动？

我们的构建软件具有使用表格报告构建状态的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

如何防止包含长文本的表的垂直滚动？

回答

相关问题