table常用的几个重要属性
效果图如下；
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.8td>
<td>8.9td>
<td>10td>
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;此元素会作为一个表格行显示（类似 ）
}
}
script>
你可能感兴趣的:(css,html,css,html)