table常用的几个重要属性

article/2025/7/17 13:07:04

效果图如下；

在这里插入图片描述

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>