如何使表格单元格的内容垂直溢出而不扩大表格单元格的高度?

2024-03-02

我有一个表格单元格div里面。我想要div溢出到表格单元格之外。我怎样才能做到这一点?需要明确的是,我不希望表格单元格随着div。下面的代码是我尝试过的,但它不起作用。

HTML:

<table>
    <tr class="row">
        <td class="cell">
            <div class="overflow">Overlow outside of this cell</div>
        </td>
    </tr>
</table>

CSS:

.row {
    height:24px;
    overflow:visible;
}
.cell {
    overflow:visible;
    max-height:24px !important;
}
.overflow {
    height:24px;
    font-size:12px;
    clear:both;
    white-space: nowrap;
    line-height:16px;
    zoom:1;
    text-align:left;
    overflow:hidden;
}

如果我猜对了你的话this http://jsfiddle.net/7zps4/可能有帮助:

.row {
  height: 24px;
  overflow: visible;
}

.cell {
  overflow: visible;
  max-height: 24px !important;
  border: 1px solid #cccccc;
  width: 10px;
}

.overflow {
  height: 24px;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
}
<table>
  <tr class="row">
    <td class="cell">
      <div class="overflow">Overlow outside of this cell</div>
    </td>
  </tr>
</table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使表格单元格的内容垂直溢出而不扩大表格单元格的高度? 的相关文章

  • 有什么方法可以声明盒子的大小/部分边框吗?

    有什么方法可以在 CSS 中声明框的大小 部分边框吗 例如一个盒子350px只显示第一个边框底部60px 我认为这可能非常有用 例子 并不真地 但以优雅降级且不需要多余标记的方式实现这种效果非常容易 div width 350px heig
  • engine.io 与 socket.io 有何不同?

    LearnBoost 似乎有一个新项目叫做引擎 io https github com LearnBoost engine io理论上似乎与socket io 类似 1 在什么情况下您会使用其中一种而不是另一种 2 对于需要通过node j
  • 如何使用 bootstrap-select 在每个选择选项上添加工具提示

    我正在尝试使用 bootstrap select 将工具提示添加到每个选择选项 当我检查时 似乎 select js 将 select 标签转换为 ul 我不知道这是我的代码不起作用的原因 html div class form group
  • 如何使用 XPath 通过 CSS 类查找元素?

    我的网页里有一个div with a class named Test 我怎样才能找到它XPath 该选择器应该可以工作 但如果将其替换为适合的标记 则会更有效 contains class Test 或者 因为我们知道所寻找的元素是div
  • 需要存储表的属性值以用于空手道中的断言

    我有一个情况 定位器没有文本值 但它的名为 title 的属性有一个我需要断言的文本值 在为其编写自定义定位器时 我只能获取文本值 而不是特定的属性值 例如 title abcdd Example div class table cell
  • 开放式 WebSocket 连接存在哪些安全问题?

    我正在构建一个使用 websockets 的应用程序 我只允许经过身份验证的用户在登录并被授予会话 ID 后打开与服务器的 Websocket 连接 一旦我与经过身份验证的用户打开了 Websocket 连接 当前 页面 就会保存打开的 W
  • 正则表达式从 img 标签获取 src 值

    我正在使用以下正则表达式来获取src第一个的值imgHTML 文档中的标签 string match src
  • 为什么该消息没有出现在 Chrome 中的手风琴上方?

    我正在尝试新的 HTML5 验证 当我尝试使用required里面的属性
  • css 在 body 上应用宽度

    我对 html 和 css 完全陌生 所以我的问题可能非常基本 但希望你们能帮助我 udnerstnad 我正在使用以下 css 代码 body background color Olive width 550px font family
  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se
  • 如何获取 Spotify API 的访问令牌?

    我已经研究 Spotify api 和示例源代码几天了 但我仍然不知道如何获取访问令牌来访问用户的播放列表数据 我已经到达了拉起登录窗口 用户登录 然后收到授权码的地步 此时 我尝试做这样的事情 window open https acco
  • 为什么 Firefox 关闭空 html 标签?

    我注意到在 Firefox 中 当我查看源代码时 它会向空标签项添加结束标签 例如 hr and img src image jpg 在 Firefox 中查看源代码我明白了 hr and img src image jpg 该文档是 HT
  • CreateJs Canvas 形状在 Windows Phone 上丢失坐标

    我正在制作一个 Createjs 和 html5 项目 在其中绘制一个形状 红色圆圈 当我单击圆圈时它会发出警报 它在所有台式机和 Android 手机上都能正常工作 除非我在 Windows Phone 中打开它 否则它在普通屏幕上工作正
  • 将可点击的锚标记转换为 html 文档中的纯文本

    我正在尝试匹配 a 我的内容中的标签 并将其替换为链接文本 后跟打印版本的方括号中的 url 如果只有 href 则以下示例有效 如果 a 包含另一个属性 它匹配太多并且不会返回所需的结果 我怎样才能匹配 URL 和链接文本 就是这样 这是
  • 从函数在 python 3 中创建全局变量

    我想知道为什么在函数结束后我无法访问变量 variable for raw data 代码是这样的 def htmlfrom Website URL import urllib request response urllib request
  • 在画布上剪出圆形图像

    我正在使用 html5 canvas 并且我正在创建一个游戏 可以将您的脸部上传到游戏中 并将其用作主要角色 不幸的是 游戏中的角色是圆形的 就像笑脸一样 那么这将如何完成呢 是否可以拍一张照片 然后将其剪成一个圆 这样圆之外的任何东西都是
  • 使用 FormData 上传 JavaScript Blob

    我在将 javascript 创建的 blob 上传到我的服务器时遇到问题 基本思想是用户上传图像 在 javascript 中我对图像进行居中裁剪并在传输之前对其进行下采样 图像处理工作正常 但上传本身无法正常工作 这是执行从 canva
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • HTML 标签在 Ionic 5 警报文本中不起作用

    我已将以下代码从 Ionic 3 迁移到 Ionic 5 const alert await this alertCtrl create subHeader About b this user name b message Test Mes
  • Flexbox 列的垂直间距相等

    我在CSS中努力让我的Flexbox在垂直等距的列中显示项目 从而使列的每行之间的空间均匀 html body flex container margin 0 height 100 width 100 body font family Dr

随机推荐