一.
下面展示一些 内联代码片
。
<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 |
::-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,要不然会有空隙的