td overflow hidden不起作用

为其table定义宽度,并使用 table-layout : fixed ,结合white-space: nowrap 实现
例如:
<style>
table{  border:1px solid blue;border-collapse:collapse; width:304px;table-layout:fixed;}
td{border:1px solid blue; height:25px;overflow:hidden; white-space:nowrap;}
</style>

tableLayout 属性用来显示表格单元格、行、列的算法规则。

固定表格布局:

固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。

在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。

通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

自动表格布局:

在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

说明

该属性指定了完成表布局时所用的布局算法。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。

默认值: auto
继承性: yes
版本: CSS2
JavaScript 语法: object.style.tableLayout="fixed"

可能的值

描述
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。
时间: 2024-10-12 13:09:31

td overflow hidden不起作用的相关文章

转:css中overflow:hidden 不起作用了吗?

css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似不合理的现象背后都会有其合理的解释. 我们知道,overflow属性值有这几种:visible:声明内容不会被剪裁.比如内容可能被渲染到容器外面.hidden:声明内容将被剪裁,并且也甭想使用滚动条来查看剪裁掉的内容.scroll:声明内容将被剪裁,但有可能出现滚动条来查看被剪裁掉的内容.滚动条出现

CSS中:overflow:hidden的作用

功能1.隐藏溢出  在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来. 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐藏. 但是在火狐或者其他浏览器里面,我们发现问题并非如此简单.我们发现,当子容器这个div的宽度和高度都大于父容器这个div的时候,父容器并没有被内撑开而是依旧显示为我们指定的宽高. 例如:结构如下: css代码: #wai{ width:200px;  background:#000; heigh

在项目中遇到关于 CSS Overflow Hidden在iPhone &amp; Safari不起作用

调试了半天 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title></title> <style> ht

关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)

1.overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden ,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. 代码如下: 运行结果如下: 2. overflow:hidden 清除浮动 一般而言,父级元素不设置高度时,高度由随内容增加自适应高度.当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0.那么问题来了,如下: 运行结果如下: 如上,由于父级元素

关于overflow:hidden的作用

1.溢出隐藏: div{ width:100px; overflow:hidden;//溢出隐藏 white-space:nowrap;//规定文本不进行换行 text-overflow:ellipsis;//当对象内文本溢出时显示省略标记 } 原文地址:https://www.cnblogs.com/iviv/p/12404932.html

CSS中overflow:hidden

CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏. ?

overflow:hidden清除浮动原理解析及清除浮动常用方法总结

最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想想 我们大家理解的overflow:hidden是超出该元素的部分进行隐藏.这个时候就需要明确一点,该元素的高度是怎么定义的.当一个div中的两个元素浮动之后,此时div的高度就会塌陷,此时div的高度为0.那是不是意味着就要将浮动元素隐藏起来,如果是真的隐藏就是反布局常识的.所以这中间肯定有我们现在还不知道

关于overflow:hidden

文章摘自:http://blog.csdn.net/cicada_slough/article/details/43305063 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信 对于这个属性的理解大家都不成问题的.但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下. 这是一个常用的div写法,下

为什么overflow:hidden;属性可以清除浮动

overflow:hidden;顾名思义,溢出容器部分隐藏.为什么它可以起到清除浮动的作用呢?我们来制造一个父容器不定高,子容器进行浮动的界面. <div class='parent'> <div class='left'></div> <div class='right'></div> </div> .parent { width:200px; background:#333333; overflow:hidden; } .left