html – overflow：使用表时隐藏不起作用_html-js-css

概述我遇到长字符串的问题,伸出我的表和溢出：隐藏似乎没有做我所做的.以下是我用于测试此效果的示例代码： <html> <head> <style type="text/css"> td.scroll { background-color:#00FFFF; width: 我遇到长字符串的问题,伸出我的表和溢出：隐藏似乎没有做我所做的.以下是我用于测试此效果的示例代码：

<HTML>    <head>        <style type="text/CSS">            td.scroll            {                background-color:#00FFFF;                wIDth:100px;                height:100px;                overflow:scroll;            }            td.hIDden             {                background-color:#00FF00;                wIDth:100px;                height:100px;                overflow:hidden;            }        </style>    </head>    <body>        <table wIDth="100%">            <tr>                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>            </tr>            <tr>                <td >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>                <td >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>                <td >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>            </tr>            <tr>                <td >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>                <td >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>                <td >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa                </td>            </tr>        </table>    </body></HTML>

加载时,无论表宽度如何,文本将展开以显示所有字符串.我所追求的是让字符串的任何部分将通过单元格测量不被显示.这是甚么可能与表,如果是,我做错了什么？

解决方法溢出只适用于块级元素.表格元素不是块元素.如果你想得到这些效果,把< div>在表格单元格内,并将效果应用于< div>.

td.scroll div {  background-color: #00FFFF;  wIDth: 100px;  height: 100px;  overflow: scroll;}td.hIDden div {  background-color: #00FF00;  wIDth: 100px;  height: 100px;  overflow: hIDden;}

有：

<table wIDth="100%"><tr>  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td></tr><tr>  <td ><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>  <td ><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>  <td ><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td></tr><tr>  <td ><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>  <td ><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>  <td ><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td></tr></table>

总结

以上是内存溢出为你收集整理的html – overflow：使用表时隐藏不起作用全部内容，希望文章能够帮你解决html – overflow：使用表时隐藏不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1142112.html