巧用CSS实现表格的隐藏显示控制，类似分页效果

最新推荐文章于 2022-12-29 17:50:52 发布

原创最新推荐文章于 2022-12-29 17:50:52 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #class #table #html #div

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS来实现表格内容动态显示与隐藏的方法。通过为不同状态的表格行分配特定的类，并结合JavaScript进行切换，可以轻松实现内容的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>巧用CSS实现表格的隐藏显示控制</title> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">.s-0,.s-1,.s-2,.s-3,.s-4,.s-5,.s-6,.s-7,.s-8,.s-9,.s-10{display:none;} .p-0 .s-0,.p-1 .s-1,.p-2 .s-2,.p-3 .s-3,.p-4 .s-4,.p-5 .s-5,.p-6 .s-6,.p-7 .s-7,.p-8 .s-8,.p-9 .s-9,.p-10 .s-10{display:block}</style> </head> <body id="default" > <div class="p-0" id="slide" > <table cellpadding="0" cellspacing="0" class="s-0" > <tr> <td width="18" ><img src="/img/common/slide_prev_disable.gif" mce_src="img/common/slide_prev_disable.gif" alt=""/></td> <td width="644" style="over-flow:hidden;text-align:center" mce_style="over-flow:hidden;text-align:center" > <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26954');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26955');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26956');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26957');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26958');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26959');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> </td> <td width="18"> <a href="javascript:;" mce_href="javascript:;" onclick="slide.className='p-1'"> <img class="arrow" src="/img/common/slide_next.gif" mce_src="img/common/slide_next.gif" alt=""/> </a> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="s-1" > <tr> <td width="18" > <a href="javascript:;" mce_href="javascript:;" onclick="slide.className='p-0'"> <img class="arrow" src="/img/common/slide_prev.gif" mce_src="img/common/slide_prev.gif" alt=""/> </a> </td> <td width="644" style="over-flow:hidden;text-align:center" mce_style="over-flow:hidden;text-align:center" > <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26954');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26955');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26956');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26957');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26958');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> </td> <td width="18"> <a href="javascript:;" mce_href="javascript:;" onclick="slide.className='p-2'"> <img class="arrow" src="/img/common/slide_next.gif" mce_src="img/common/slide_next.gif" alt=""/> </a> </td> </tr> </table> <table cellpadding="0" cellspacing="0" class="s-2" > <tr> <td width="18" > <a href="javascript:;" mce_href="javascript:;" onclick="slide.className='p-1'"> <img class="arrow" src="/img/common/slide_prev.gif" mce_src="img/common/slide_prev.gif" alt=""/> </a> </td> <td width="644" style="over-flow:hidden;text-align:center" mce_style="over-flow:hidden;text-align:center" > <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26960');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26961');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26962');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> <a href="/files/2009/02/18/.jpg" mce_href="files/2009/02/18/.jpg" onclick="disp('26964');return false;"><img src="/files/2009/02/18/.jpg" mce_src="files/2009/02/18/.jpg" alt="" /></a> </td> <td width="18"> <img src="/img/common/slide_next_disable.gif" mce_src="img/common/slide_next_disable.gif" alt=""/> </td> </tr> </table> </div> </body> </html>