正文

如何隐藏表格行溢出？

 2023-03-06  106

关键词：

【中文标题】如何隐藏表格行溢出？【英文标题】：How to hide Table Row Overflow? 【发布时间】：2010-12-06 00:15:41 【问题描述】：

我有一些 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>

【问题讨论】：

您使用 <table> 而不是使用 divs/spans+CSS 的任何特殊原因？第二种方法更难正确，但提供了更大的灵活性。我不确定是否可以使用常规表来做你想做的事情。我正在使用table，因为我正在显示表格数据！ 【参考方案1】：

需要指定两个属性，table 上的table-layout:fixed 和单元格上的white-space:nowrap;。您还需要将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 中测试

【讨论】：

唯一的缺点（看起来）是表格单元格的宽度是相同的。有什么办法可以解决这个问题？据我所知 - 我相信浏览器部分做了一个假设，即由于没有定义单独的单元格宽度，因此在单元格数量中平均分割表格宽度。我能想到的唯一可能的解决方法是根据每个单元格包含的字符数（在所有单元格的字符总数中）计算每个单元格的宽度，无论是服务器端还是客户端（前者可能是性能更高的选择）。这听起来是不是有点矫枉过正？我在上一条评论中的意思是我在相关行中所有单元格中的总字符数 :) 是的，我认为这太过分了。我希望我能在没有table-layout:fixed 的情况下让它工作，那将是理想的。 @Josh - 删除 table-layout:fixed 会阻止隐藏溢出的文本，但结果是表格宽度会增加。浏览器如何知道每个单元格的宽度（没有为每个单元格指定宽度）？我是不是误解了你的要求？【参考方案2】：

唯一的缺点（似乎）是表格单元格宽度相同。任何解决这个问题的方法？ ——乔什·斯托多拉 10 月 12 日 15:53

只需定义表格的宽度和每个表格单元格的宽度

类似

table border-collapse:collapse; table-layout:fixed; width:900px;
th background: yellow; 
td overflow:hidden;white-space:nowrap; 
.cells1width:300px;
.cells2width:500px;
.cells3width:200px;

它就像一个魅力:o)

【讨论】：

但是宽度会根据要在其中显示的数据量而波动。这不像我在这里使用等宽字体！【参考方案3】：

一般来说，如果您使用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;

【讨论】：

谢谢，这很有帮助。比固定整个表格更好的方法。这不适用于百分比宽度，例如响应式设计。理想情况下，我想将此列设置为 100% 宽度，并在调整页面大小时相应地调整溢出。有解决此问题的提示吗？哇，老线程，但是嘿——在我的用例中，我还希望标记不要驻留在 TD 元素的 innerHtml 中——因为我有允许用户下载表格数据的 javascript。同样，它是表格中的表格数据——不是标记的内容——在我的例子中。【参考方案4】：

在大多数现代浏览器中，您现在可以指定：

<table>
 <colgroup>
  <col  />
  <col  />
  <col  />
 </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 的支持。 ;)

【讨论】：

【参考方案5】：

如果接受 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/

【讨论】：

【参考方案6】：

这是我尝试过的。基本上，我将“灵活”内容（包含太长行的 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>

【讨论】：

我应该补充一点，这里的优点是我不需要设置任何列的绝对宽度。设计流畅。这里的问题是，你怎么知道给哪个单元分配哪个类？除非您手动键入您需要的每个页面，Web 1.0 风格，否则这不是一个包罗万象的解决方案。【参考方案7】：

用 class="container"

将表格包装在 div 中

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

然后

#table_id tr td 
   white-space:nowrap;

结果

【讨论】：

如何隐藏材质ui表格单元格中的溢出内容而不是换行

】如何隐藏材质ui表格单元格中的溢出内容而不是换行【英文标题】：Howtohidetheoverflowcontentinmaterialuitablecellinsteadofwrapping【发布时间】：2020-06-3006:53:51【问题描述】：我正在使用材质UI表格组件来呈现表格。当单元格中的内容溢出... 查看详情

如何隐藏select2上的溢出？

】如何隐藏select2上的溢出？【英文标题】：Howtohideoverflowonselect2?【发布时间】：2013-05-0802:57:46【问题描述】：我正在使用出色的select2jquery控件。我正在尝试使用CSSdiv布局来模仿3单元格表格显示布局。当selected大于当前select2宽度... 查看详情

如何在不使用溢出隐藏的情况下将边框添加到与边框半径完美匹配的表格列

】如何在不使用溢出隐藏的情况下将边框添加到与边框半径完美匹配的表格列【英文标题】：Howdoiaddbordertothetablecolumnthatmatchestheborderradiusperfectlywithoutusingoverflowhidden【发布时间】：2022-01-0117:24:18【问题描述】：我正在尝试在下图... 查看详情

如何隐藏表格指定行的边框？

】如何隐藏表格指定行的边框？【英文标题】：Howtohidetheborderforspecifiedrowsofatable?【发布时间】：2012-07-1601:48:31【问题描述】：我想隐藏表格中特定行的边框。怎么做？有什么想法吗？示例代码受到高度赞赏。【问题讨论】：您... 查看详情

选择时如何从表格视图中隐藏行

】选择时如何从表格视图中隐藏行【英文标题】：Howtohiderowsfromtableviewwhenisselected【发布时间】：2020-01-3022:57:42【问题描述】：我想在选择该行时隐藏该行例如，如果我选择行“uno”，该行将转到其他视图控制器拍照，当用户拍... 查看详情

如何隐藏滚动条但保留溢出表的功能？ [复制]

】如何隐藏滚动条但保留溢出表的功能？[复制]【英文标题】：HowcanIhidethescrollbarbutkeepthefunctionalityformyoverflowingtable?[duplicate]【发布时间】：2020-06-1106:42:50【问题描述】：我创建了一个表格，其中包含一个具有特定最大高度的容器... 查看详情

如何隐藏 HTML 表格行 <tr> 使其不占用空间？

】如何隐藏HTML表格行<tr>使其不占用空间？【英文标题】：HowcanIhideanHTMLtablerow<tr>sothatittakesupnospace?【发布时间】：2010-11-1118:17:15【问题描述】：如何隐藏HTML表格行<tr>使其不占用空间？我有几个<tr>... 查看详情

空白：nowrap 和溢出：隐藏在表格单元格中

】空白：nowrap和溢出：隐藏在表格单元格中【英文标题】：white-space:nowrapandoverflow:hiddenwithintablecell【发布时间】：2013-01-2607:24:51【问题描述】：我正在制作日历。我有一张桌子，每个<td>是一天。我想在单元格中显示当... 查看详情

Jquery 显示/隐藏表格行

...wallrows]我已经搜索了所有但找不到解决方案。有谁知道我如何使用jquery做查看详情

如何在 .ascx 页面中显示/隐藏表格行 <tr>

】如何在.ascx页面中显示/隐藏表格行<tr>【英文标题】：Howtoshow/hidetablerow<tr>in.ascxpage【发布时间】：2010-12-1416:32:28【问题描述】：我试过这个，但无法通过：-后面的代码protectedHtmlTableRowtrComment;protectedvoidPage_Load(objectsender... 查看详情

elementui表格文字不换行，溢出隐藏(代码片段)

elementui表格文字不换行，溢出隐藏tooltip属性tooltip属性通过设置elementui表格的列属性<el-table-columnprop="method"width="150"align="left":show-overflow-tooltip="true"label="请求方法"></el-table-col... 查看详情

控制表格内的文本溢出时隐藏

table{ table-layout:fixed;/*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/ } td{text-align:center; word-break:keep-all;/*不换行*/ white-space:nowrap;/*不换行*/&nbs 查看详情

CSS显示：表格单元格，设置高度和溢出：隐藏，不起作用？

】CSS显示：表格单元格，设置高度和溢出：隐藏，不起作用？【英文标题】：CSSdisplay:table-cell,setheightandoverflow:hidden,doesn\'twork?【发布时间】：2016-08-0403:59:02【问题描述】：如果子元素的内容太大，我想剪裁一个元素，但它不适用... 查看详情

jQuery：通过搜索输入隐藏表格行，解决 td rowspan 和 colspan

...“子”行。目前它只隐藏第一行而不是所有相关的子行。如何隐藏所有行查看详情

当颤动行小部件中发生溢出时，显示隐藏元素数量的计数器

】当颤动行小部件中发生溢出时，显示隐藏元素数量的计数器【英文标题】：Showcountertonumberofelementshiddenwhenoverflowoccursinflutterrowwidget【发布时间】：2021-05-2803:42:08【问题描述】：谁能帮助实现Gmail的这个功能，当电子邮件列表变... 查看详情

tabletd的溢出隐藏

今天碰到一个问题，就是在一个双列的表格布局中，我想让左边一列宽度为40%，右边一列宽度为60%；然后依次设置左边td宽度40%和右边td宽度60%，状态显示正常，宽度也正常。但是当右边的td内部的内容宽度大于60%的时候，并没有... 查看详情

csstalbe中td溢出隐藏div溢出隐藏

td溢出隐藏1table{2width:100px;3table-layout:fixed;/*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/4}5td{6width:100%;7word-break:keep-all;/*不换行*/8white-space:nowrap;/*不换行*/9overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/10text... 查看详情

CSS如何只显示1行并隐藏其他行？

】CSS如何只显示1行并隐藏其他行？【英文标题】：CSShowtoonlyshow1rowandhidetheothers?【发布时间】：2018-11-1909:09:25【问题描述】：我的页面顶部有一个导航。在其中，我有5家不同公司的5只市场股票。我想以全宽显示5，但随着窗口变... 查看详情