精通CSS+DIV：6，用CSS设置表格与表单样式

阅读更多

一、控制表格
1，表格中的标记

table: border, summary
caption
th: scope(row, col)

2，表格的颜色

.datalist {
  color: #0046a6;
  background-color: #d2e8ff;
  font-family: Arial;
}
.datalist caption {
  font-size: 18px;
  font-weight: bold;
}
.datalist th {
  color: #003e7e;
  background-color: #7bb3ff;
}

3，表格的边框

.datalist {
  border: 1px solid #007eff;
  font-family: Arial;
  border-collapse: collapse;
}
.datalist th, .datalist td {
  border: 1px solid #429fff;
}

4，隔行变色

.datalist tr.altrow {
  background-color: #c7e5ff;
}

5，鼠标经过变色
FireFox:

.datalist tr:hover {
  background-color: #c4e4ff;
}

IE则不支持Anchor Pseudo Classes，只能用JavaScript配合:

var rows = document.getElementsByTagName('tr');
for(var i=0; i < rows.length; i++) {
  rows[i].onmouseover = function() {
    this.className += 'altrow';
  }
  rows[i].onmouseout = function() {
    this.className = this.className.replace('altrow', '');
  }
}

二、控制表单
1，表单中的元素

form
input
textarea
select
option

2，文字按钮

.btn {
  background-color: transparent;
  border: 0px;
}

3，七彩下拉菜单

  blue
  red


.blue {
  background-color: #7598FB;
  color: #000000;
}
.red {
  background-color: #E20A0A;
  color: #ffffff;
}

4，类似Excel的无边框输入框

input {
  border: none;
}