滚动的表格
2018年3月28日15:42:44修改了css部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <div class="table-wrap">
<table>
<thead>
<tr>
<td>标题1</td>
<td>标题2</td>
<td>标题3</td>
<td>标题4</td>
<td>标题5</td>
</tr>
</thead>
<tbody>
<tr>
<td>内容1内容1内容1内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5内容55</td>
</tr>
<tr>
<td>内容1内容1</td>
<td>内容2内容1内容1</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5内容5</td>
</tr>
<tr>
<td>内容1内容1</td>
<td>内容2</td>
<td>内容3内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
</tbody>
</table>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
table {
text-align: center;
}
table td {
min-width: 60px;
padding: 0.5em 1em;
}
thead td {
color: #ffffff;
font-size: 18px;
font-weight: 700;
background: orange;
}
.table-wrap {
width: 800px;
overflow: hidden;
overflow-x: scroll;
margin: 20px auto;
border: 1px solid red;
}
table {
width: 1000px;
white-space: nowrap;
border-collapse: collapse;
}
table td {
border: 1px solid #444444;
}
|
