- it
- table布局 刨坑 2 table 超出滚动
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
></title
>
<style
>
* {
margin
: 0;
padding
: 0;
}
html
{
font
-size
: 10vw
;
}
.scrollView
{
margin
: 1rem
5%;
background
: #
008000;
overflow
: auto
;
width
: 603px
;
}
.td
{
width
: 200px
;
font
-size
: 20px
;
}
table
{
width
: 100%;
border
-collapse
: collapse
;
border
-spacing
: 0;
padding
: 0;
margin
: 0;
}
table tr td
{
height
: .5rem
;
border
: 1px solid red
;
text
-align
: center
;
box
-sizing
: border
-box
;
}
.item
{
background
: green
;
}
.scrollView
::-webkit
-scrollbar
{
height
: .1rem
;
background
-color
: #eee
;
}
.scrollView
::-webkit
-scrollbar
-track
{
background
-color
: #eee
;
}
.scrollView
::-webkit
-scrollbar
-thumb
{
border
-radius
: .04rem
;
background
: #ABAB00
;
background
-image
: -webkit
-linear
-gradient(45deg
, rgba(255, 255, 255, .2) 25%, transparent
25%, transparent
50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent
75%, transparent
);
}
.scrollView
::-webkit
-scrollbar
-button
{
display
: none
;
}
</style
>
</head
>
<body
>
<div
class="scrollView">
<table
>
<tr
>
<td
>
<p
class="td">M
-0</p
>
</td
>
<td
>
<p
class="td">M
-1</p
>
</td
>
<td
>
<p
class="td">M
-2</p
>
</td
>
<td
>
<p
class="td">M
-3</p
>
</td
>
<td
>
<p
class="td">M
-4</p
>
</td
>
<td
>
<p
class="td">M
-5</p
>
</td
>
<td
>
<p
class="td">M
-6</p
>
</td
>
<td
>
<p
class="td">M
-7</p
>
</td
>
<td
>
<p
class="td">M
-8</p
>
</td
>
<td
>
<p
class="td">M
-9</p
>
</td
>
<td
>
<p
class="td">M
-10</p
>
</td
>
<td
>
<p
class="td">M
-11</p
>
</td
>
<td
>
<p
class="td">M
-12</p
>
</td
>
<td
>
<p
class="td">M
-13</p
>
</td
>
<td
>
<p
class="td">M
-14</p
>
</td
>
<td
>
<p
class="td">M
-15</p
>
</td
>
<td
>
<p
class="td">M
-16</p
>
</td
>
<td
>
<p
class="td">M
-17</p
>
</td
>
<td
>
<p
class="td">M
-18</p
>
</td
>
<td
>
<p
class="td">M
-19</p
>
</td
>
<td
>
<p
class="td">M
-20</p
>
</td
>
<td
>
<p
class="td">M
-21</p
>
</td
>
<td
>
<p
class="td">M
-22</p
>
</td
>
<td
>
<p
class="td">M
-23</p
>
</td
>
<td
>
<p
class="td">M
-24</p
>
</td
>
<td
>
<p
class="td">M
-25</p
>
</td
>
<td
>
<p
class="td">M
-26</p
>
</td
>
<td
>
<p
class="td">M
-27</p
>
</td
>
<td
>
<p
class="td">M
-28</p
>
</td
>
<td
>
<p
class="td">M
-29</p
>
</td
>
</tr
>
<tr
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
<td
>
<p
class="td">stage
-A
</p
>
</td
>
</tr
>
<tr
>
<td
>
<p
class="td">0</p
>
</td
>
<td
>
<p
class="td">1</p
>
</td
>
<td
>
<p
class="td">2</p
>
</td
>
<td
>
<p
class="td">3</p
>
</td
>
<td
>
<p
class="td">4</p
>
</td
>
<td
>
<p
class="td">5</p
>
</td
>
<td
>
<p
class="td">6</p
>
</td
>
<td
>
<p
class="td">7</p
>
</td
>
<td
>
<p
class="td">8</p
>
</td
>
<td
>
<p
class="td">9</p
>
</td
>
<td
>
<p
class="td">10</p
>
</td
>
<td
>
<p
class="td">11</p
>
</td
>
<td
>
<p
class="td">12</p
>
</td
>
<td
>
<p
class="td">13</p
>
</td
>
<td
>
<p
class="td">14</p
>
</td
>
<td
>
<p
class="td">15</p
>
</td
>
<td
>
<p
class="td">16</p
>
</td
>
<td
>
<p
class="td">17</p
>
</td
>
<td
>
<p
class="td">18</p
>
</td
>
<td
>
<p
class="td">19</p
>
</td
>
<td
>
<p
class="td">20</p
>
</td
>
<td
>
<p
class="td">21</p
>
</td
>
<td
>
<p
class="td">22</p
>
</td
>
<td
>
<p
class="td">23</p
>
</td
>
<td
>
<p
class="td">24</p
>
</td
>
<td
>
<p
class="td">25</p
>
</td
>
<td
>
<p
class="td">26</p
>
</td
>
<td
>
<p
class="td">27</p
>
</td
>
<td
>
<p
class="td">28</p
>
</td
>
<td
>
<p
class="td">29</p
>
</td
>
</tr
>
</table
>
</div
>
</body
>
</html
>
