[css+js]表格标题超出不隐藏，内容超出隐藏的问题

Posted 2023-04-03

是这样的， 首先，表格的宽不确定，我用100%自适应。表格的标题我用TH标签写的，有多少个标题不确定，是由用户自己来定的。当标题里TH过多时[标题不隐藏，不覆盖]，TABLE出现横向滚动条。
表格里的内容用TD写的，TD超出隐藏，鼠标移入出现提示。
请大神帮忙。

参考技术A <table>
    <tr>         
        <td> 
            <div style="with:200px;overflow:auto;"> 
                <TH>标题1</TH> 
                <TH>标题2</TH>  
                <TH>标题3</TH>  
                <TH>标题4</TH>  
                <TH>标题4</TH>   
                <TH>标题4</TH> 
             </div> 
        </td> 
        <td></td> 
        <td></td> 
        <td style="display:none" onmousemove="show(this);"></td> 
        <td style="display:none" onmousemove="show(this);"></td> 
        <td style="display:none" onmousemove="show(this);"></td> 
</table>
<script src="../../Jscript/jquery-1.3.1.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
function show(obj) 
    this.css('display':'block');
  
 
</script>

 我这是自己一个字母一个字母认真敲的 希望对你有用

参考技术B 在CSS样式当中加 overflow:hidden 参考技术C 不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。
<style>
#Data_content width:100%; overflow:auto
#Data_content table width:auto;
#Data_content td width:50px; height:20px; overflow:hidden;
#Data_content td divwidth:50px; height:20px; overflow:hidden
#Data_content td div p width:10000px;
</style>

<div id="Data_content">
<table >
<tr>
<td>
<TH>标题1</TH>
<TH>标题2</TH>
<TH>标题3</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题1</TH>
<TH>标题2</TH>
<TH>标题3</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题1</TH>
<TH>标题2</TH>
<TH>标题3</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题1</TH>
<TH>标题2</TH>
<TH>标题3</TH>
<TH>标题4</TH>
<TH>标题4</TH>
<TH>标题4</TH>
</tr>
<tr>
<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>
<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

<td title="不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。"><div><p>不需要JS 只需要几行CSS就行了。 注意每个TD 加个TITLE 属性 就可以提示。</p></div></td>

</tr>
</table>

CSS如何隐藏td里面超出的文字？

参考技术A

display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

一般的文字截断（适用于内联与块）：

.text-overflow
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

参考技术B display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/