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

发布网友 发布时间：2022-04-30 15:45

我来回答

共3个回答

热心网友 时间：2022-04-21 06:51

<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>

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

热心网友 时间：2022-04-21 08:09

在CSS样式当中加 overflow:hidden

热心网友 时间：2022-04-21 09:44

不需要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 div{width: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>