常用表

CSS样式代码

以下是常用的CSS样式代码，用于美化表格的展示和交互效果。

@media screen and (min-width: 1024px) {  
#main { width: 800px; }  
}  
.table th { text-align: center; vertical-align: middle !important; }  
.table td { vertical-align: middle !important; }  
.fold-down { text-align: right; height: 100px; width: 100%; position: absolute; bottom: 0; left: 0; cursor: pointer; padding-right: 20px; padding-top: 70px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); background-repeat: no-repeat; background-position: right bottom; }

功能描述

以上CSS样式代码主要用于美化表格的展示和交互效果。具体包括以下几个方面：

  1. 在屏幕宽度大于等于1024像素时，将主容器的宽度设置为800像素。
  2. 将表格的表头单元格文本居中对齐，使其垂直居中显示。
  3. 将表格的单元格文本垂直居中对齐，使其内容居中显示。
  4. 为展开/折叠按钮添加右对齐的样式，并设置其背景图片为从透明到白色的渐变效果，同时设置背景图片不重复且只出现在底部右侧的位置。

这些CSS样式代码可以应用于常见的网页表格布局中，使得表格在不同设备上都能够呈现出美观的效果，并且支持用户通过点击展开/折叠按钮来控制表格内容的显示与隐藏。