Html 如何隐藏表行溢出？_Html_Css_Html Table

Html 如何隐藏表行溢出？

html css

Html 如何隐藏表行溢出？,html,css,html-table,Html,Css,Html Table,我有一些html表格，其中文本数据太大，无法容纳。因此，它垂直扩展单元以适应这种情况。因此，现在具有溢出的行的高度是具有较小数据量的行的两倍。这是不能接受的。如何强制表格具有相同的行高1em 下面是一些重现问题的标记。表格的高度应仅为一行，溢出的文本应隐藏 <!DOCTYPE html> <html> <head> <title>Test</title> <meta http-equiv="content-t

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


试验
表{宽度：250px；}
表tr{高度：1em；溢出：隐藏；}
这是一个测试。
你明白我的意思吗？
我讨厌这种溢出。

需要指定两个属性，

表格布局：固定表格上的和空白：nowrap在单元格上。您还需要移动溢出：隐藏到单元格
table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  } 

。在Firefox 3.5.3和IE 7中测试
唯一的缺点（似乎）是
表格单元格宽度相同。任何
如何解决这个问题乔什·斯托多拉
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;}

通常，如果您使用的是空白：nowrap，它就像一个符咒：o）
这可能是因为您知道哪些列将包含包装（或拉伸单元格）的内容。对于这些列，我通常使用一个特定的class
属性将单元格内容包装在span
中，并应用一个特定的宽度
例如：
HTML：
<td><span class="description">My really long description</span></td>

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

在大多数现代浏览器中，您现在可以指定：
<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>

结果在整个表中为您提供了很好的隐藏溢出。适用于最新的Chrome、Safari、Firefox和IE。在9之前，我还没有在IE中进行过测试，但我猜它最早可以工作到7个版本，你甚至可能幸运地看到5.5或6个版本的支持
 如果javascript被接受为答案，我制作了一个jQuery插件来解决这个问题（有关这个问题的更多信息，请参阅）
要使用插件，只需键入
$('selector').tableoverflow();

插件：
完整示例：
以下是我尝试过的东西。基本上，我将“flexible”内容（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>

表格{
宽度：100%；
}
.隐藏{
空白：正常；
溢出：隐藏；
最大高度：1.2米；
最小宽度：50px；
}
showall先生{
空白：nowrap；
}
全部展示
在长句中隐藏东西时要灵活一点
把这一切也展示出来
使用class=“container”将表格包装在div中
然后
结果
您使用
而不是使用divs/span+CSS有什么特殊原因吗？第二种方法是更痛苦的获得正确的，但提供了更大的灵活性。我不确定是否可以使用常规表执行您想要的操作。我使用的是表
，因为我正在显示表格数据！唯一的缺点（似乎）是表格单元格的宽度相同。有什么办法可以解决这个问题吗？据我所知还没有-我相信浏览器部分有一个假设，即由于没有定义单独的单元格宽度，所以要在单元格数量中平均分配表格宽度。我能想到的唯一可能的解决方法是根据每个单元格包含的字符数（所有单元格的字符总数中）计算每个单元格的宽度，无论是服务器端还是客户端（前者可能是性能更好的选择）。这听起来有点过分了吗？我在最后一句话中的意思是：行中所有单元格中的字符总数中：）是的，我认为这太过分了。我希望我能在没有表格布局：修复
的情况下实现这一点，这将是理想的。@Josh-删除表格布局：修复会阻止溢出的文本被隐藏，但结果是，表格宽度会增加。浏览器如何知道每个单元格的宽度（没有为每个单元格指定宽度）？我是否误解了您的要求？但宽度将根据其中显示的数据量而波动。这不像我在这里使用的是等距字体！！谢谢，这非常有帮助。比固定整张桌子更好的方法。这不适用于百分比宽度，例如响应性设计。理想情况下，我希望将此列设置为100%宽度，并在调整页面大小时相应调整溢出。解决这个问题有什么提示吗？我应该补充一点，这里的优点是我不需要设置任何列的绝对宽度。设计是流动的。这里的问题是，您如何知道将哪个单元格分配给哪个类？除非您手动键入所需的每个页面（Web1.0风格），否则这不是一个包罗万象的解决方案。
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>

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

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