怎样通过css样式显示和隐藏表格

发布网友 发布时间：2022-04-06 12:25

我来回答

共4个回答

热心网友 时间：2022-04-06 13:54

CSS中显示和隐藏有多种方法，比较常见的是有display:none|block;visibility: hidden|visible;他们的区别在于，对文档流影响的区别。一般大家显示隐藏元素，比较倾向于用display。

你如果想隐藏表格，可以用table{display:none;}来操作。想显示的话把display:block即可。

热心网友 时间：2022-04-06 15:12

如果要隐藏行，给个样式名给相应的tr
tr.other{display: none;}
tr.other.active{display: table-row;}
如果要隐藏整个表格，给个样式名给相应的table
table.mytable{display: none;}
table.mytable.active{display: table;}

热心网友 时间：2022-04-06 16:47

html代码：

<table id='myhide' cellspacing="4">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<table id='myshow' cellspacing="4">
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

css代码：

<style>
    #myhide{
        display:none;/*关键属性，这里的属性值表示隐藏*/
        width:100px;
        height:100px;
        border: 1px solid #ddd;
    }
    #myshow{
        display:table;/*关键属性，这里的属性值表示表格以表格形式显示*/
        width:100px;
        height:100px;
    }
    #myhide td,#myshow td{
        border: 1px solid #ddd;
    }
</style>

追问jsp里怎么通过按钮控制呢？

追答

我先提供一个基于jquery的方法吧，用纯js写起来要麻烦些，首先引用这个js:

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

这样就可以用jquery做一些脚本。其实*是css，还是js,html，放到jsp页面里面都没有影响，何况能静态实现的如果简单些又何必用动态呢，下面是一些代码：

css代码：

<style>
    #my{
        display:table;/*关键属性，这里的属性值表示表格以表格形式显示*/
        width:300px;
        height:300px;
    }
    #my td{
        text-align: center;
        border: 1px solid #ddd;
    }
</style>

html代码：

<button id="sw">I want to show</button>&nbsp;&nbsp;&nbsp;<button id="he">I want to hide</button>
<table id='my' cellspacing="4">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

javascript代码（jquery)：

<script>
    $('#sw').on('click',function(){
        $('#my').show();//这里只是显示，默认块状形式显示
    })
    $('#he').on('click',function(){
        $('#my').hide();
    })
</script>

热心网友 时间：2022-04-06 18:38

给表格一个CSS属性display:none是隐藏，display:block是显示