Table表格的属性和表格里面的滚动条

一.

下面展示一些 内联代码片。

<div>
    <div class="table-head">
         <table>
             <thead>
                 <tr>
                     <th>姓名</th>
                     <th>小区</th>
                     <th>电话</th>
                 </tr>
             </thead>
         </table>
     </div>
     <div class="table-body">
         <table>
             <tbody>
                 <tr>
                     <td>小花</td>
                     <td>中山社区2区3栋</td>
                     <td>15619376788</td>
                 </tr>
                 <tr>
                     <td>小花</td>
                     <td>中山社区2区3栋</td>
                     <td>15619376788</td>
                 </tr>
                 <tr>
                     <td>小花</td>
                     <td>中山社区2区3栋</td>
                     <td>15619376788</td>
                 </tr>
                 <tr>
                     <td>小花</td>
                     <td>中山社区2区3栋</td>
                     <td>15619376788</td>
                 </tr>
                 <tr>
                     <td>小花</td>
                     <td>中山社区2区3栋</td>
                     <td>15619376788</td>
                 </tr>
                 <tr>
                     <td>小花</td>
                     <td>中山社区2区3栋</td>
                     <td>15619376788</td>
                 </tr>
             </tbody>
         </table>
     </div>
 </div>
<style>
.table-body {
    width: 100%;
    height: 14rem;
    //1.首先给盒子一个固定的高度，如果里面的内容多了，就在盒子里面田间滚动条
    overflow-y: scroll;
}
table thead {
 width: calc(100% - 1em);
 /*表头与表格垂直对齐*/
}

/* .table-body table tr:nth-child(2n+1) {
    background-color: #f2f2f2;
} */

/* 去掉和修改盒子里的滚动条 */
.table-body::-webkit-scrollbar {
    width: 8px;
}

.table-body::-webkit-scrollbar-track {
    background-color: none;
    /* -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em; */
}

.table-body::-webkit-scrollbar-thumb {
    background-color: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

#myMap .amap-info-content {
    background: rgba(19, 50, 108, 0.5);
    border-radius: 8px;
    box-shadow: none;
    border: none;
    padding: 15px 25px 15px 15px;
}

#myMap .amap-info-content p {
    font-size: .2rem;
    color: #fff;
}
</style>

姓名	小区	电话

小花	中山社区2区3栋	15619376788
小花	中山社区2区3栋	15619376788
小花	中山社区2区3栋	15619376788
小花	中山社区2区3栋	15619376788
小花	中山社区2区3栋	15619376788
小花	中山社区2区3栋	15619376788

``` // css美化浏览器默认滚动条样式：

::-webkit-scrollbar {//滚动条的宽度
width:9px;
height:9px;
}
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#dddddd;
background-clip:padding-box; /背景被裁剪到内边距框 content-box 背景裁剪到内容框/
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
background-color:#f8f8f8;
}
　　给某个div加滚动条设置：

.test1::-webkit-scrollbar {
width: 8px;
}
.test1::-webkit-scrollbar-track {
background-color:red;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.test1::-webkit-scrollbar-thumb {
background-color:green;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
`

参考链接：https://www.cnblogs.com/tangjiang-code/p/10091927.html

collspacing=0,要不然会有空隙的