table常用的几个重要属性

最新推荐文章于 2024-07-12 00:07:26 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量2.8k

点赞数 4

分类专栏： css html 文章标签： css html

本文链接：https://blog.csdn.net/qq_45695853/article/details/119598573

版权

css 同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

html

10 篇文章 1 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现表格的样式设置，包括边框、单元格间距和宽度调整，以及通过CSS控制表格的显示和隐藏，实现表格内容的展开和收起功能。同时，详细讲解了rowspan和colspan属性在跨行和跨列合并单元格中的应用。

摘要由CSDN通过智能技术生成

效果图如下；

在这里插入图片描述

border 规定表格边框的宽度
cellpadding 规定单元边沿与其内容之间的空白
cellspacing 规定单元格之间的空白
width 规定表格的宽度
border-collapse: collapse; 为表格设置合并边框模型默认值为separate
rowspan跨行合并单元格
colspan跨列合并单元格


 <style>
        table{
            border-collapse: collapse;  /* 为表格设置合并边框模型 默认值为separate*/
            /* border-spacing: 0; */
            border-color: #e2e0e0;
            user-select: none;
        }
        th,td{
            width: 120px;
            text-align: center;
            line-height: 45px;
        }
        th{
            background:#e2e0e0;
            color: #666;
        }
        th:hover{
            background:salmon;
            color:#fff;
            cursor: pointer;
        }
        .tr_hidden{
            display: none;
        }
        .table_more .tr_hidden{
            display: table-row;
        }
    </style>
</head>

<body>
    <table cellspacing="0" border="1" cellpadding="0" width="500px">
        <tbody>
            <tr>
                <th>爱好</th>
                <td>唱歌</td>
                <td>跳舞</td>
                <td>...</td>
            </tr>
            <tr>
                <th>性格</th>
                <td>活泼</td>
                <td>文静</td>
                <td>...</td>
            </tr>
            <tr>
                <th>擅长</th>
                <td>跆拳道</td>
                <td>武术</td>
                <td>...</td>
            </tr>
            <tr  class="tr_hidden">
                <td colspan="4">完美</td>
            </tr>
            <tr  class="tr_hidden">
                <td rowspan="2">总结</td>
                <td>9.8</td>
                <td>8.9</td>
                <td>10</td>
            </tr>
            <tr  class="tr_hidden">
                <td colspan="3">活动圆满结束</td>
                
            </tr>
            <tr class="tr_hidden_more" id="more">
                <td colspan="4">更多∨</td>
            </tr>
            <tr class="tr_hidden" id="packUp">
                <td colspan="4">收起∧</td>
            </tr>
        </tbody>
    </table>

    <script>
        window.onload = function(){

            // 更多，收起的主要思路是点击他们的时候给table添加一个类名
           
            more.onclick = function(){
                document.querySelector('table').setAttribute('class',"table_more");
                this.style.display = "none"
            }

            packUp.onclick = function(){
                document.querySelector('table').removeAttribute('class',"table_more");
                more.style.display = "table-row"
               // display:table-row;此元素会作为一个表格行显示（类似 <tr>）
            }
        }
        
    </script>