关于 table 那些事儿

一. table border 设置方式：

第一种方法：

1、将table的属性设置为：BORDER=0 、cellspacing=1 ；

2、设置table的背景色为即你要设置的table的边框颜色；

3、设置所有td背景色为#ffffff白色；

这样，就大功告成了。

第二种方法：

1、设置BORDER=0 ；

2、再通过CSS，给Table加上1px的border-top,border-left；

3、然后再设置所有的td的border-right,border-bottom；

不妨试试哦

第三种方法：

1、设置table的CSS为{border-collapse:collapse;border:none;}

2、再设置td的CSS为{border:solid #000 1px;}

大功告成！而且Word也能认出这种设置。

我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。

如下：

二：tbody 增加滚动条

 需求：tbody 的高度固定，当内容垂直高度超出 tbody 时，内容垂直滚动。

方式：
       tbody : {

　　　display: block;

　　　height: 200px;

　　　overflow-y: scroll;

       }

　　 thead, tbody tr {

　　　　display: table;

　　　　width: 100%;

　　　　table-layout: fixed;

　　}

示例 如下：

table tbody {
    display:block;
    height:200px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch; // 为了滚动顺畅 
}

table tbody::-webkit-scrollbar {
    display: none; // 隐藏滚动条
}

table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

table thead {
    width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}