折叠表格演示
<style>
/** 表格HTML结构：
table 表格，tr 行，td 列，th 表头
table 父元素，tr 第一级子元素，td、th 第二级子元素
以下选择器在独立页面使用，若页面中存在其它表格会受影响
*/
table {
margin: 20px 0 20px 25%;
width: 50%;
border-collapse: collapse; /* 表框折叠 */
}
th {
background: #f2f2f2;
font-size: bold;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
tr:not(:first-child) {
visibility: collapse; /* 非首行隐藏 */
}
td:first-child {
text-align: center; /* 首列文本居中 */
}
table:hover tr {
visibility: visible; /* 指针移入显示 */
}
h1 {
text-align: center;
}
</style>
<h1>鼠标指针移至表头展开表格</h1>
<table id="dataTable">
<tr>
<th width="50">序号</th>
<th>内 容</th>
<th width="150">备注</th>
</tr>
</table>
<script>
var total = 10, znums = '一二三四五六七八九十'.split('');
var frg = document.createDocumentFragment();
Array.from({length: total}).forEach((tr, idx) =>{
tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>内容${znums[idx]}</td><td></td>`;
frg.appendChild(tr);
});
dataTable.appendChild(frg);
</script>
前一篇: CSS : scale、rotate和translate属性应用演示
下一篇: 玩个球
发表评论:
评论列表 [0条]
