css 中table简易样式

因为一直做页面的表格样式所以将一些收集整理了一下

<table>

<tr>

<th>标题</th>

<th>标题</th>

<th>标题</th>

<th>标题</th>

</tr>

<tr>

<td>内容：</td>

<td>123</td>

<td>内容：</td>

<td>456</td>

</tr>

<tr>

<td>内容：</td>

<td>123</td>

<td>内容：</td>

<td>456</td>

</tr>

</table>

table tr{}//表格行样式

table tr:nth-child(odd){}//表格奇数行样式

table tr:nth-child(even){}//表格偶数行样式

table tr:nth-child(3){}//表格3倍数行样式

jquery设置样式可以这样写

var oddRowColor = "#F2F2F2"
var evenRowColor = "#DFF1F5"
$("table tr:odd td").css("background-color", oddRowColor);  //改变偶数行背景色
$("table tr:even td").css("background-color", evenRowColor);  //改变偶数行背景色

table tr th{}//表头样式

table tr td{}//表格所有列样式

table tr td:first-child {}//表格第一列样式

table tr td:nth-child(odd){}//表格奇数列样式

table tr td:nth-child(even){}//表格偶数列样式

table tr td:nth-child(3){}//表格3的倍数列样式

table tr td input{}//表格所有input标签样式

table tr td input[type="text"] //表格中所有input 标签类型等于text的样式

元素圆角样式

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

控制用户只能输入正整数

 οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"

jquery检查用户输入的是否是空。

if (Number.replace(/(^\s*)|(\s*$)/g, "") == "") 

如果大家有什么好的实用的样式可以留言共同学习，谢谢~！