如何将包含宽 HTML 的表格单元格的内容限制为整体特定宽度?

  • 本文关键字:包含宽 HTML 表格 单元格 html css
  • 更新时间 :
  • 英文 :


我有一个表(不是一组div(代表用户帖子的"提要"。该表位于页面的中间,该页面本身以表格形式布局:左侧,中间的带有提要,右侧。

问题是有时人们会添加从HTML源(例如MailChimp(复制粘贴的帖子,并且源包括具有自己宽度的表格,或宽div或大图像,并且帖子比我页面上的"提要宽度"宽。发生这种情况时,Feed 会拉伸内容,将页面右侧的单元格进一步向右推。

我尝试在表格周围或表格中的单元格中添加这样的东西:

<div style="max-width: 395px;">

这确实起到了停止向中间提要右侧推送和拉伸列的效果,但对于长帖子,中间提要本身的内容现在会扩展并显示在它之前推送的右侧项目的顶部

我的问题是是否可以在中间提要表周围放置一个div,以便 (1( 它被限制为 395px 宽度和 (2( 即使表格内的单元格包含其他表格、大图像或文本,内容也不会延伸到表格外。

如有必要,文本可以自动换行,图像可以截断。

如果在表格中不可能,我可以使用div 重写整个事情并使其比方式更好地工作吗?

谢谢。

有了你的解释,没有例子,我们对你的帮助不大,但我想我可以帮到你。

使用此 CSS 属性:

my-cell { 
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}

您可以访问 MDN 链接:盒子大小的 Mozilla 开发者的

或者,您可以在DIV容器或单元格overflow: hidden;中尝试使用此CSS属性

希望这对你有帮助。

最新更新