当前位置: 首页 > 面试题库 >

如何隐藏表格行溢出?

田意致
2023-03-14
问题内容

我有一些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-layout:fixedtablewhite- space:nowrap;单元格上指定两个属性。您还需要将移至overflow:hidden;单元格

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


 类似资料:
  • 嗯,我也试着把它藏在身体里!还是不工作..?

  • 这是我的HTML PHP表格页面的全部代码。。 我遇到的问题是,如果列和行(字段)为空, 当数据为空时,我想隐藏列和行字段。

  • 问题内容: 我需要在父div上加上圆角以掩盖其子级的内容。在简单的情况下可以正常工作,但是当父级相对或绝对定位时,基于webkit的浏览器和Opera会中断。 这适用于Firefox和IE9: CSS HTML 谢谢您的帮助! 更新: 导致此问题的错误已在Chrome中修复。我还没有重新测试Opera或Safari。 问题答案: 没关系,每个人,我设法通过在包装器和包装盒之间添加一个额外的div来

  • 我的代码大师们。 我想让我的头球转向中心。我想要剪辑溢出:隐藏,但当我调整屏幕的纵向它剪辑图像的右侧,当它的风景它剪辑底部。我想让它同样夹住顶部、右侧、底部和左侧。 真实的图像要复杂得多,只是用这个作为例子。 像TransformOrigin:center这样的东西会非常好,但在这种情况下不起作用。 我耍了个笔头把戏 提前感谢!

  • 我正在尝试测试智能GWT应用程序。我有一个关键问题。我无法使用以下命令单击元素: 是回报 找不到xpath“/html/body/div[10]/div[3]/div/div/div[1]/div/form/table/tbody[2]/tr[4]/td/table/tbody/tr/td[2]/span/img”(Capybara::ElementNotFound) 代码如下: 这个img上有很

  • 问题内容: 我需要显示大于其父元素的子元素,但不删除overflow:hidden;。这可能吗?parent元素的 子元素一旦脱离父边界,就会被剥离。 (元素定义了其他的css,我只是为了清楚起见放置了样式属性) 问题答案: 这是完全不可能做到你想要什么都和父..相反,你可以引入额外的儿童并移动到这一点。 HTML: CSS: